Directives - md-nav-bar

AngularJS Material Long Term Support has officially ended as of January 2022. Read the End-Of-Life announcement.

mdNavBar API Documentation

The <md-nav-bar> directive renders a list of material tabs that can be used for top-level page navigation. Unlike <md-tabs>, it has no concept of a tab body and no bar pagination.

Because it deals with page navigation, certain routing concepts are built-in. Route changes via ng-href, ui-sref, or ng-click events are supported. Alternatively, the user could simply watch the value of md-selected-nav-item (currentNavItem in the below example) for changes.

Accessibility functionality is implemented as a tablist with tabs. We've kept the role="navigation" on the <nav>, for backwards compatibility, even though it is not required in the latest Working Group Note from December 2017.

Keyboard Navigation

  • Tab/Shift+Tab moves the focus to the next/previous interactive element on the page
  • Enter/Space selects the focused nav item and navigates to display the item's contents
  • Right/Down moves focus to the next nav item, wrapping at the end
  • Left/Up moves focus to the previous nav item, wrapping at the end
  • Home/End moves the focus to the first/last nav item

Usage

Attributes

Parameter Type Description
md-selected-nav-item string string

The name of the current tab; this must match the name attribute of <md-nav-item>.
md-no-ink-bar boolean boolean

If set to true, the ink bar will be hidden.
nav-bar-aria-label string string

An aria-label applied to the md-nav-bar's tablist for accessibility.