CoreUI for Angular v5.7.28 - Sidebar Nav Tree Variant

We are pleased to announce the release of CoreUI for Angular v5.7.28. This release adds a tree variant to the Sidebar navigation, makes compact work on a whole c-sidebar-nav, and animates the collapse of template-based nav groups. It also changes how dropdownMode="none" treats the active route - see the Migration Notes below.

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.

Angular

Bootstrap

React.js

Vue.js

How to Update

To update to CoreUI for Angular v5.7.28, run:

ng update @angular/core@22 @angular/cli@22 @coreui/coreui@~5.9.0 @coreui/angular@~5.7.28

• Please ensure that there are no error messages in the results.
• See also:
  • CoreUI for Angular Installation
  • CoreUI for Angular versions

What’s New

Tree Navigation

c-sidebar-nav accepts variant="tree", which draws nested groups as a tree, with a guide line per level and items lined up under the group they belong to:

<c-sidebar visible class="border-end">
  <c-sidebar-nav variant="tree">
    <c-nav-group toggler="Parent item" visible>
      <c-nav-item href="#">Child item</c-nav-item>
      <c-nav-group toggler="Nested group" visible>
        <c-nav-item href="#">Nested child</c-nav-item>
        <c-nav-item href="#">Nested child</c-nav-item>
      </c-nav-group>
    </c-nav-group>
  </c-sidebar-nav>
</c-sidebar>

The variant adds the sidebar-nav-tree class, which is styled by the @coreui/coreui 5.9 stylesheet this release already requires. See the Sidebar documentation for the full example.

dropdownMode="none" Leaves Groups to the User

• With dropdownMode="none", a group under the active route no longer opens on init either, so the route drives nothing - only the user’s clicks open and close groups.
• c-sidebar-nav now passes its dropdownMode on to groups written in the template (c-nav-group), and nested levels inherit it. With none, an active link no longer opens the groups above it.

Bug Fixes

• Sidebar nav: compact now applies to c-sidebar-nav itself, not only to a group’s nested item list, so compacting a whole navigation works.
• Nav group: c-nav-group keeps its items displayed while they collapse, so closing animates instead of snapping shut.

Documentation

• Fixed JSDoc comments, including the cFormFloating default and the responsive type of the table configuration.

Dependency Updates

We have updated key dependencies to their latest compatible versions for CoreUI for Angular v5.7.28:

Development Tools

• eslint to: 10.10.0

Released Packages

• @coreui/angular 5.7.28
• @coreui/angular-chartjs 5.7.28
• @coreui/icons-angular 5.7.28

Migration Notes

After upgrading:

1. Install updated dependencies.
2. Run your test suite and verify the build.
3. If you use dropdownMode="none" and relied on the group of the active route being expanded on load, switch to dropdownMode="path" (the default) or dropdownMode="close".
4. If you set compact on c-sidebar-nav, the whole navigation is now compacted, not only the nested group lists.

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