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
.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;
}
<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
.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;
}
<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>