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

Left-aligned (default)

Centered

Right-aligned

Border Variants

Navbar Border Styles

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

Thick Border

Borderless

Colored Borders

Blue

Green

Red

Yellow

Class	Effect
`navbar-thick`	Bold 2px border
`navbar-borderless`	No border, active uses background highlight
`navbar-border-blue`	Blue bottom border
`navbar-border-green`	Green bottom border
`navbar-border-red`	Red bottom border
`navbar-border-yellow`	Yellow bottom border

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

`navigation-toggle`	Hamburger toggle button
`navigation-toggle-solid`	Solid background variant
`navigation-fixed`	Fixed position (top: 0)

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

Reference

Navigation Reference

`navbar`	Horizontal navigation bar
`navbar-centered`	Center-aligned items
`navbar-left`	Left-aligned items
`navbar-right`	Right-aligned items
`navbar-vertical`	Vertical sidebar layout
`navbar-stack`	Wrap items on mobile
`navbar-pills`	Pill-style navigation
`nav-stacked`	Stacked vertical list with blue accent active state
`nav-stacked-blocked`	Filled row variant with background and borders
`nav-tabs`	Tab navigation
`nav-stats`	Navigation with stats/badges
`breadcrumbs`	Breadcrumb navigation
`breadcrumbs-path`	Path-style separators
`pagination`	Page navigation

Pattern

Dashboard Layout

Combining navbar with stacked sidebar navigation and content area.

Revenue

$12,340

Users

1,234

Orders

567

<nav class="navbar navbar-border-blue">
  <ul>
    <li class="active"><a href="#">Dashboard</a></li>
    <li><a href="#">Reports</a></li>
  </ul>
</nav>
<div class="units-row margin-top-extra">
  <aside class="unit-20 phone-unit-100">
    <nav class="nav-stacked">
      <ul>
        <li class="active"><a href="#">Overview</a></li>
        <li><a href="#">Analytics</a></li>
      </ul>
    </nav>
  </aside>
  <div class="unit-80 phone-unit-100">
    <!-- Content area -->
  </div>
</div>

Display data with tables, or add feedback with alerts & labels.