Since 5.2.0

Nav directives will help you to build navigation components. They're meant to replace existing Tabset as a more flexible alternative.

Nav includes NgbNav, NgbNavItem, NgbNavLink, NgbNavContent directives and the NgbNavOutlet component.

These directives are fully based on the bootstrap markup leaving all DOM nodes available for you. They just handle nav selection, accessibility and basic styling for you. You can always add additional classes and behavior on top if necessary. Please refer to the bootstrap nav documentation for a complete set of classes you can use with navs.

The simplest nav would look something like a combination of styled links:

and an optional outlet, where the content related to the active nav would be displayed:

This example would look something along these lines (or better dive into one of the working demos):


We use ng-templates for the content, so by default only currently active content will be present in the DOM tree. If you wish to keep even the non-active content in the DOM, take a look at the [destroyOnHide] input and this demo.

Selection / active nav

To select your navs programmatically, you have to give your nav items unique ids, so you could know and set which one is currently active either using the [(activeId)]="..." binding or the imperative API with.select(id). If you don't provide any ids, they will be generated automatically. The only limitation is that you can't have the '' (empty string) as id, because ngbNavItem, ngbNavItem="" and [ngbNavItem]="''" are indistinguishable.

It is also possible to select disabled navs with [activeId] and .select().

When user clicks on a nav, the NavChangeEvent will be raised that can prevent nav selection. This event won't be raised in case of programmatic nav selection. It is not possible to select disabled tabs by clicking on them.

It is up to you to specify the nav type using bootstrap standard .nav-tabs or .nav-pills classes. Otherwise active nav will not be highlighted, similarly to bootstrap.

As you have already seen in the first example, you can put ngbNavOutlet anywhere on the page. Also both ngbNavOutlet and ngbNavContent are completely optional.

Apart from this please follow bootstrap recommendations on styling and accessibility and take a look at our alternative markup, dynamic tabs and custom style demos.

Accessibility

By default nav sets 'tablist', 'tab' and 'tabpanel' roles on elements. If you plan to use different ones (ex. if you're using a nav inside the navbar), you can tell it not to generate any roles and add your own. Or you could simply override them by providing role="myRole" where necessary.

Router integration is simple: just use standard <router-outlet> component instead of ngbNavOutlet and add [routerLink] directives to nav links.

Ex. if you want to handle urls fragments like: /some/url#one and /some/url#two in your component you'd have something like this:

and in your template:

Keyboard support is not activated by default and can be turned on via the [keyboard] input. Depending on the input value, we'll either focus or switch to a specific nav.

Please refer to the NgbNav API

Arrow(Left|Up) Moves focus or switches to the previous non-disabled nav. Loops through navs and depends on nav orientation.
Arrow(Right|Down) Moves focus or switches to the next non-disabled nav. Loops through navs and depends on nav orientation.
Home Moves focus or switches to the first non-disabled nav
End Moves focus or switches to the last non-disabled nav