+ 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.
+
+ 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.
+
+ 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.
+
.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. +
+ +
+ 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: +
+ +