CoreUI v5.7.0 - Search Button & Sidebar Nav Tree

We are excited to announce the release of CoreUI v5.7.0 for Bootstrap. This update introduces the new Search Button component, a tree variant for Sidebar navigation, improved translucent color handling, and important bug fixes for luminance calculation and sidebar toggle behavior.

---

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

---

How to Update

To update your project to CoreUI v5.7.0, follow these steps:

1. Open your project’s package.json.
2. Locate the @coreui/coreui entry under dependencies and update the version number to 5.7.0.
3. Save your changes to the package.json file.
4. In your project’s root directory, run the update command appropriate for your package manager:
   • For npm users, execute npm install.
   • For yarn users, execute yarn install.
   • For pnpm users, execute pnpm install.

What’s New

Features

• Search Button: New component providing a keyboard-shortcut-aware search trigger button. Displays the platform-appropriate shortcut hint (⌘K on macOS, Ctrl+K on Windows/Linux) and offers a clean, accessible entry point for search interfaces.

• Sidebar Nav - Tree Variant: Added a tree variant to sidebar navigation, enabling hierarchical tree-style navigation structures. Includes narrow visibility helpers for better responsive behavior in collapsed sidebar states and improved spacing.

• Improved Translucent Colors: Refactored translucent color handling for better consistency across components.

Bug Fixes

• Luminance Calculation: Fixed RGB channel reading in luminance() function to explicitly use the RGB color space. This ensures contrast calculations work correctly for colors defined in non-RGB spaces such as HSL.

• Sidebar Toggle: Resolved an issue where SVG child elements could intercept toggle clicks. The fix uses closest() to find the data-toggle element instead of relying on event.target directly, which may point to an SVG or path child element.

Dependency Updates

We have updated key dependencies to their latest compatible versions:

• @babel/preset-env from: ^7.29.0 to: ^7.29.5
• autoprefixer from: ^10.4.27 to: ^10.5.0
• eslint from: ^9.39.3 to: ^9.39.4
• find-unused-sass-variables from: ^6.1.1 to: ^6.2.0
• globby from: ^16.1.1 to: ^16.2.0
• postcss from: ^8.5.8 to: ^8.5.14
• rollup from: ^4.59.0 to: ^4.60.4
• sass-embedded from: ^1.98.0 to: ^1.99.0
• terser from: 5.46.0 to: 5.47.1

Migration Notes

This is a feature release with no breaking changes. After upgrading:

1. Install updated dependencies.
2. Run your test suite and verify the build.
3. If you use custom color definitions in non-RGB spaces (e.g., HSL), verify that contrast calculations still produce expected results.
4. Explore the new Search Button and Sidebar Nav tree variant in your layouts.

---

For a comprehensive overview of all changes, enhancements, and updates introduced in this release, please refer to the full changelog on GitHub.