Dependencies
Uses:Default Example
A basic left aligned horizontal nav with a button on the right.
<nav class="o-navbar o-navbar--banner-@bp2 | t-navbar-default">
<div class="o-wrapper">
<div class="o-navbar__wrapper">
<div class="o-navbar__left">
<ul class="o-navbar__nav o-list-inline | u-gap u-mb-0">
<li class="o-list__item">
<a class="o-nav__link" href="#nav1">Item 1 Foo</a>
</li>
<li class="o-list__item">
<a class="o-nav__link" href="#nav2">Item 2 Boo</a>
</li>
<li class="o-list__item">
<a class="o-nav__link" href="#nav3">Item 3 Koo</a>
</li>
<li class="o-list__item">
<a class="o-nav__link" href="#nav4">Item 4 Poo</a>
</li>
</ul>
</div>
<div class="o-navbar__right">
<button class="c-btn" type="button">Button</button>
</div>
</div>
</div>
</nav>Adaptive Navbar
Using the adaptive navigation object and the navbar default theme, we can create an adaptable navigation list header.
<nav class="t-navbar-default | o-navbar">
<div class="o-wrapper">
<div class="o-navbar__wrapper">
<div class="o-navbar__left o-adaptive-nav | u-w-auto u-w-50%-@bp2 u-overflow-hidden u-mr-sm" data-adaptive-nav>
<ul class="o-navbar__nav o-adaptive-nav__list o-list-inline | u-gap u-align-middle" data-adapt-list>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 1</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 2</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 3</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 4</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 5</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 6</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 7</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 8</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 9</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 10</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 11</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 12</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 13</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 14</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="o-nav__link" data-adapt-link>Item 15</a>
</li>
<li class="o-list__item" data-adapt-more>
<button class="c-btn c-btn--clear" type="button">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="nonzero" d="M14 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm-6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm-6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z"/>
</svg>
<span class="u-hidden">More Options</span>
</button>
<div class="c-dropdown c-dropdown--right t-dropdown--default" style="display: none;">
<ul class="o-list-stacked">
</ul>
</div>
</li>
</ul>
</div>
<div class="o-navbar__right | u-flex-fixed">
<a class="c-btn c-btn--primary" href="#primary">Primary Link</a>
</div>
</div>
</div>
</nav>Search Example
A search style navigation bar using the default theme.
<nav class="t-navbar-default | o-navbar">
<div class="o-wrapper">
<div class="o-navbar__wrapper">
<div class="o-navbar__left">
<ul class="c-pagination | o-list-inline">
<li class="c-pagination__item | o-list__item">
<a class="c-pagination__link" href="#prev">
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true">
<path d="M10.806 10.817 7.978 8l2.824-2.84-1.41-1.41L5.15 8l4.242 4.23z"/>
</svg>
<span class="u-hidden">Previous</span>
</a>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<a class="c-pagination__link" href="#1">1</a>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<a class="c-pagination__link" href="#2">...</a>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<a class="c-pagination__link" href="#3">3</a>
</li>
<li class="c-pagination__item | o-list__item | is-current">
<a class="c-pagination__link" href="#4">4</a>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<a class="c-pagination__link" href="#5">5</a>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<a class="c-pagination__link" href="#6">...</a>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<a class="c-pagination__link" href="#375">375</a>
</li>
<li class="c-pagination__item | o-list__item">
<a class="c-pagination__link" href="#next">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path d="m5.166 10.833 1.417 1.417 4.25-4.241-4.25-4.259L5.17 5.163 8 8.009z"/>
</svg>
<span class="u-hidden">Next</span>
</a>
</li>
</ul>
</div>
<div class="o-navbar__right">
<ul class="o-list-inline | u-gap-sm u-flex-no-wrap">
<li class="o-list__item">
<label class="c-label c-label--inline | u-w-100%">
<span class="c-label__text">Sort:</span>
<span class="c-label__input">
<select class="c-input c-input--select">
<option>Least Expensive</option>
<option>Most Expensive</option>
<option>Low CO2</option>
<option>High CO2</option>
<option>Low MPG</option>
<option>High MPG</option>
<option>Mileage</option>
<option>Recently Added</option>
<option>Newest Model</option>
<option>Oldest Model</option>
</select>
</span>
</label>
</li>
<li class="o-list__item">
<button class="c-btn c-btn--primary" type="button">
<svg class="c-icon | u-mr-xs-@bp2" viewbox="0 0 16 16" aria-hidden="true">
<path stroke-linecap="round" stroke-width="1.5" d="M5 13h6M3 8h10M1 3h14"/>
</svg>
<span class="u-hidden-<bp2">Filters</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</nav>