CoreUI for Angular v5.7.25 - Declarative Nav Groups and Enclosed Variants

We are pleased to announce the release of CoreUI for Angular v5.7.25. This release adds c-nav-group, c-nav-group-items and c-nav-title, so navigation groups can be written directly in the template, introduces the enclosed and enclosed-pills variants for the Nav and Tabs components, and moves the Sidebar group collapse from @angular/animations to the Collapse directive with CSS transitions. As a result, @angular/animations is no longer a peer dependency of @coreui/angular. No breaking changes were announced in the published release notes, but a few defaults changed - 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.25, run:

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

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

What’s New

Declarative Nav Groups

Until now, nested navigation groups were available only by passing an INavData array to c-sidebar-nav. The new c-nav-group, c-nav-group-items and c-nav-title components let you write the same structure in the template:

<c-sidebar-nav>
  <c-nav-title>Components</c-nav-title>
  <c-nav-group toggler="Base" visible>
    <c-nav-item href="#">Accordion</c-nav-item>
    <c-nav-item href="#">Breadcrumb</c-nav-item>
    <c-nav-group toggler="Forms" compact>
      <c-nav-item href="#">Select</c-nav-item>
      <c-nav-item href="#">Range</c-nav-item>
    </c-nav-group>
  </c-nav-group>
  <c-nav-group toggler="Buttons">
    <c-nav-item href="#">Button groups</c-nav-item>
    <c-nav-item href="#">Dropdowns</c-nav-item>
  </c-nav-group>
</c-sidebar-nav>

• c-nav-group takes a toggler label or a togglerTemplate (which receives the visible state), a visible input with a visibleChange output, and compact.
• Groups behave as an accordion within their level: opening one collapses its open sibling. c-sidebar-nav provides the top level, and every group provides a level for its own children.
• A collapsed group keeps the state of its nested groups, so reopening it brings them back as they were.
• A cNavLink that becomes active - including through routerLinkActive - opens every group above it.
• Outside c-sidebar-nav, top-level groups keep their own state; provide NavGroupService on the container to make them an accordion as well.

See the Sidebar documentation for examples.

Enclosed Nav and Tabs Variants

The Nav variant input and the Tabs c-tabs-list variant input now accept enclosed and enclosed-pills:

<c-nav variant="enclosed">
  <c-nav-item [active]="true" href="#">Active</c-nav-item>
  <c-nav-item href="#">Link</c-nav-item>
  <c-nav-item [disabled]="true" href="#">Disabled</c-nav-item>
</c-nav>

Nav Improvements

• Nav: New role input on c-nav, defaulting to navigation.
• Nav item: c-nav-item renders a cNavLink anchor when href is set and forwards active, disabled and tabindex to it. Without href, the item projects its content as before.

Bug Fixes

• Nav link: cNavLink sets the disabled attribute only on elements that support it (button, fieldset, input, optgroup, option, select, textarea). Other hosts, such as anchors, get aria-disabled="true" and tabindex="-1" instead.
• Nav link: An unset numeric binding no longer writes tabindex="NaN".
• Sidebar nav: A group’s nav stays displayed while it collapses, so closing animates instead of snapping shut.
• Sidebar nav: .nav-item inside c-sidebar-nav is now displayed as a block, restoring its top margin.

Refactoring

• Sidebar nav: Groups collapse with the cCollapse directive and CSS transitions instead of @angular/animations.
• Sidebar: c-sidebar, c-sidebar-nav, c-sidebar-nav-group and c-sidebar-nav-link no longer set ChangeDetectionStrategy.Eager, so they use Angular’s default change detection strategy (OnPush in Angular 22).
• Nav link: cNavLink no longer sets an inline cursor style; the cursor is left to the stylesheet.
• Schematics: ng add @coreui/angular no longer installs @angular/animations.

Dependency Updates

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

Angular Core Updates

• @angular/animations removed from the peer dependencies of @coreui/angular - the library no longer uses it

Development Tools

• typescript-eslint to: 8.69.0

Released Packages

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

Migration Notes

No breaking changes were announced in the published release notes. After upgrading:

1. Install updated dependencies.
2. Run your test suite and verify the build.
3. @angular/animations is no longer a peer dependency of @coreui/angular. If you added it, and an animations provider, only for CoreUI, you can remove them; keep them if your own code or another library still uses Angular animations.
4. c-nav now renders role="navigation" by default. Set the role input if your nav needs a different role.
5. The c-nav variant input no longer accepts an empty string - leave the input unset instead.
6. A disabled cNavLink on an anchor no longer gets the disabled attribute; it keeps the disabled class and gets aria-disabled="true" and tabindex="-1". Update any CSS or tests that select a[disabled].
7. cNavLink no longer sets an inline cursor: pointer. If you use it on an element that the stylesheet does not give a pointer cursor, such as an anchor without href, add the cursor in your own styles.

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