Menu · ngb-bootstrap

A navigation panel in the style of Taiga UI's aside navigation: a header, entries with icons, expandable groups, an action and a pinned item, that collapses to an icon rail. The entries are ngbNavLinks on Bootstrap 6 .nav-link, which also work on their own in ngb-nav, a plain horizontal or vertical list.

Basic

ngb-navigation takes ngbNavLink entries, ngb-navigation-groups and a full-width action. The entry marked ngbNavigationHeader is ruled off at the top, and the one marked ngbNavigationEnd is pinned to the bottom. Long text is cut with an ellipsis and shown in full as a tooltip. collapsible adds the toggle. The panel fills its container's height and takes its colour; set --navigation-bg to colour it.

Expanded. Current page: Account.

Icon rail

[(collapsed)] shrinks the panel to a rail of icons. Labels stay available to screen readers and as tooltips, and a group opens the panel instead of expanding inside the rail.

Short panel

The panel always contains its content. When the container is too short, the header stays at the top, the pinned entry stays at the bottom and the entries in between scroll.

Lists

ngb-nav is the plain list: variant is pills (default), underline or plain; orientation="vertical" stacks it and fill shares the width. active marks the current entry, disabled greys one out and icon adds a leading icon.

Pills, with icons and a disabled entry

Underline

Plain, filling the width

Vertical

Buttons

Use button[ngbNavLink] to switch something on the same page, and turn the landmark off with [landmark]="false". The current button has aria-current="true".

Showing: All

Router links

Let the router mark the current page: routerLinkActive="active" with ariaCurrentWhenActive="page". Add [routerLinkActiveOptions]="{ exact: true }" to a link that is a prefix of others.

Navigation and Sidebar

Taiga UI's aside navigation is a free-standing panel; its layout package then places it in a shell. The same split applies here. ngb-navigation is the standalone panel: you fill it with markup, and it fits a card, a settings page or your own shell. ngb-sidebar is the slot of ngb-layout: a fixed column that turns into a drawer below lg, built from a route tree. They are not merged because the sidebar's styles are tied to the layout's columns, seams and drawer. The panel reuses the sidebar's one generic piece, the height-animating group (.ngb-sidebar-collapse), and has its own item styling.

Accessibility

ngb-navigation and ngb-nav are navigation landmarks: give them a label when a page has more than one. The current link has aria-current="page"; a current button has aria-current="true". Every entry is a normal tab stop, so arrow keys do nothing special; use ngb-tabs for the tablist pattern.

A group's toggle is a button with aria-expanded and aria-controls; closed entries are inert, so they leave the tab order. The collapse toggle has aria-expanded and a name that says what it does. In the rail the labels are visually hidden but still read out, and appear as tooltips. A disabled button is natively disabled; a disabled link has aria-disabled, leaves the tab order and ignores clicks, a routerLink's included. An icon-only entry needs an aria-label. The chevron's rotation and the width change stop with prefers-reduced-motion.