Navigation bar

A navigation bar enables navigation through a series of hierarchical screens.

When a new screen is displayed, a back button, often labeled with the title of the previous screen, appears on the left side of the bar. Sometimes, the right side of a navigation bar contains a control, like an Edit or a Done button, for managing the content within the active view.

All second-level elements should be added to the markup even if you don’t need them to ensure proper display. You can leave them empty, though, for example if you don’t need any forward actions put use empty element:

<div class="navigation-bar-forward"></div>

Examples

scss
.navigation-bar {
  @include substrate-navigation-bar;
}

.navigation-bar-back {
  @include substrate-navigation-bar-back;
}

.navigation-bar-forward {
  @include substrate-navigation-bar-forward;
}

.navigation-bar-item {
  @include substrate-navigation-bar-item;
}
html
<div class="navigation-bar">
  <div class="navigation-bar-back">
    <a class="navigation-bar-item" href="#back">Go back</a>
  </div>
  <div class="navigation-bar-title">
    <h1 class="navigation-bar-item">Standard navigation bar</h1>
  </div>
  <div class="navigation-bar-forward">
    <a class="navigation-bar-item" href="#back">Add new stuff</a>
  </div>
</div>

Extended variant

The default navigation bar is a compact strip across the viewport with back, title and forward elements aligned next to each other.

Use the extended navigation bar for a bigger navigation bar that works well as a page header, putting more emphasis on the page title. It uses the same markup as substrate-navigation-bar.

Examples

scss
.navigation-bar {
  @include substrate-extended-navigation-bar;
}

.navigation-bar-back {
  @include substrate-extended-navigation-bar-back;
}

.navigation-bar-forward {
  @include substrate-extended-navigation-bar-forward;
}

.navigation-bar-item {
  @include substrate-extended-navigation-bar-item;
}
html
<div class="extended-navigation-bar">
  <div class="extended-navigation-bar-back">
    <a class="extended-navigation-bar-item" href="#back">Go back</a>
  </div>
  <div class="extended-navigation-bar-title">
    <h1 class="extended-navigation-bar-item">Extended navigation bar</h1>
  </div>
  <div class="extended-navigation-bar-forward">
    <a class="extended-navigation-bar-item" href="#back">Add new stuff</a>
  </div>
</div>

@mixin substrate-extended-navigation-bar()

The main element for the extended navigation bar.

Requires

@mixin substrate-navigation-bar()

The main element for the navigation bar.

@mixin substrate-navigation-bar-title()

The element that contains the title, not the actual title itself.