Wayfinding

Navigation

Horizontal navbars, pill navigation, tabs, stacked vertical nav, breadcrumbs, and pagination. All built on semantic HTML.

Horizontal

Navbar

<nav class="navbar">
  <ul>
    <li class="active"><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Navbar Alignment

Border Variants

Navbar Border Styles

Control the border weight, remove it entirely, or apply a color accent.

Thick Border

Borderless

Colored Borders

<nav class="navbar navbar-thick">...</nav>
<nav class="navbar navbar-borderless">...</nav>
<nav class="navbar navbar-border-blue">...</nav>

Mobile

Mobile Overflow

By default, navbars scroll horizontally on mobile. Use navbar-stack to wrap items instead.

<nav class="navbar navbar-stack">
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Pills

Pill Navigation

<nav class="navbar-pills">
  <ul>
    <li class="active"><a href="#">All</a></li>
    <li><a href="#">Published</a></li>
    <li><a href="#">Drafts</a></li>
  </ul>
</nav>

Tabs

Tab Navigation

<div class="nav-tabs">
  <ul>
    <li class="active"><a href="#">Overview</a></li>
    <li><a href="#">Analytics</a></li>
    <li><a href="#">Settings</a></li>
  </ul>
</div>

Vertical

Stacked Navigation

Clean vertical nav with a blue accent on the active item. Use li.active to mark the current page. Non-link labels use <span> for section headings.

<nav class="nav-stacked">
  <ul>
    <li class="active"><a href="#">Dashboard</a></li>
    <li><a href="#">Analytics</a></li>
    <li><a href="#">Users</a></li>
  </ul>
</nav>

Blocked Variant

Add nav-stacked-blocked for filled rows with background and bottom borders.

<nav class="nav-stacked nav-stacked-blocked">
  <ul>
    <li class="active"><a href="#">Dashboard</a></li>
    <li><a href="#">Analytics</a></li>
    <li><a href="#">Users</a></li>
  </ul>
</nav>

Breadcrumbs

Breadcrumb Navigation

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li class="active"><span>Current Page</span></li>
  </ul>
</nav>

Pagination

Page Navigation

<nav aria-label="Pagination">
  <ul class="pagination">
    <li><a href="#" aria-label="Previous page">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li class="active"><a href="#" aria-current="page">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#" aria-label="Next page">&raquo;</a></li>
  </ul>
</nav>

Vertical

Vertical Navbar

Use navbar-vertical for a sidebar-style navbar with a left border instead of bottom border.

Mobile

Navigation Toggle

Mobile hamburger menu toggle for showing/hiding navigation.

<span class="navigation-toggle">
  <span>Menu</span>
</span>

Reference

Navigation Reference