Menu @ngb-bootstrap/core/navigation

<ngb-nav>Component

NgbNav

A list of links or buttons on Bootstrap 6 .nav : the lighter cousin of tabs, for moving between pages or sections without panels and without roving focus (every entry is a tab stop). Choose pills (filled active entry, the default), underline or plain , horizontal or vertical . It is a navigation landmark; name it with label , or set [landmark]="false" for a list of in-page buttons.

<ngb-nav label="Sections" variant="pills" orientation="vertical">
  <a ngbNavLink href="#overview" active>Overview</a>
  <a ngbNavLink href="#usage">Usage</a>
  <a ngbNavLink href="#archive" disabled>Archive</a>
</ngb-nav>

<ngb-navigation>Component

NgbNavigation

A standalone navigation panel in the style of Taiga UI's aside navigation: an optional toggle, a header entry, entries and expandable groups, an action, and an item pinned to the bottom. With collapsible the toggle shrinks it to a rail of icons ( [(collapsed)] ). It fills its container's height and takes the container's colour; set --navigation-bg to colour it. ngb-sidebar is the layout slot of an application shell (fixed column, mobile drawer, route tree); this is the same idea as a free-standing panel you fill with markup, for cards, settings pages or your own shell.

<ngb-navigation label="Project" collapsible [(collapsed)]="rail">
  <a ngbNavLink ngbNavigationHeader [icon]="home" href="/">Acme Cloud Console</a>
  <a ngbNavLink [icon]="search" href="/search">Search</a>
  <ngb-navigation-group label="Settings" [icon]="gear">
    <a ngbNavLink href="/account">Account</a>
  </ngb-navigation-group>
  <a ngbNavLink ngbNavigationEnd [icon]="star" href="/favorites">Favorites</a>
</ngb-navigation>

<ngb-navigation-group>Component

NgbNavigationGroup

A group of entries that expands under a toggle with a chevron. Put ngbNavLink entries inside; they line up with the group's text. In the collapsed rail the group opens the panel instead.

<ngb-navigation-group label="Settings" [icon]="gear" [(open)]="open">
  <a ngbNavLink href="/account">Account</a>
</ngb-navigation-group>

<a[ngbNavLink], button[ngbNavLink]>Component

NgbNavLink

One entry of an ngb-nav , on Bootstrap 6 .nav-link . Use it on an a (a page link) or a button (an in-page action). active marks the current entry: aria-current="page" on a link, aria-current="true" on a button. With routerLink , let routerLinkActive="active" and ariaCurrentWhenActive="page" do it instead. A disabled link gets aria-disabled , leaves the tab order and ignores clicks, even a routerLink 's; a disabled button is natively disabled.

<a ngbNavLink routerLink="/inbox" routerLinkActive="active" ariaCurrentWhenActive="page">
  Inbox
</a>
<button ngbNavLink [icon]="gear" (click)="open()">Settings</button>

NgbNavOrientationType

Direction of a nav.

type NgbNavOrientation = 'horizontal' | 'vertical'

NgbNavVariantType

Look of a nav: filled pills, an underlined row, or plain links.

type NgbNavVariant = 'pills' | 'underline' | 'plain'