Navigation

List navigation

The list navigation is a simple navigation component based on the ui-list. Usually it appears in the sidebar. Could be used in conjunction with scrollspy. If the nav element is proceeded by a input[type="search"] there will be the proper vertical spacing between the search field and the nav. You can apply the .ui-nav-list__item class to either a <li> or an <a> nested within an <li>.

List 2 title

List item 2.2 Add new item

<nav class="ui-nav-list">
  <h4>List 1 title</h4>
  <a href="#" class="ui-nav-list__item is-selected">List item 1.1</a>
  <a href="#" class="ui-nav-list__item">List item 1.2</a>
  <a href="#" class="ui-nav-list__item">List item 1.3</a>
  <a href="#" class="ui-nav-list__item">List item 1.4</a>
  <a href="#" class="ui-nav-list__item">List item 1.5</a>
  <a href="#" class="ui-nav-list__item_action icon-plus-2">Add new item</a>
</nav>
<div class="ui-nav-list">
  <h4>List 2 title</h4>
  <ul>
    <li class="ui-nav-list__item">
      <a href="#" >List item 2.1</a>
    </li>
    <li class="ui-nav-list__item is-selected">
      <a href="#" >List item 2.2</a>
    </li>
    <li class="ui-nav-list__item">
      <a href="#" >List item 2.3</a>
    </li>
  </ul>
</div>
<div class="ui-nav-list">
  <h4>List 2 title</h4>
  <ul>
    <li>
      <a href="#" class="ui-nav-list__item is-selected">List item 2.2</a>
      <a href="#" class="ui-nav-list__item_action icon-plus-2">Add new item</a>
    </li>
  </ul>
</div>

List nav with description

<nav class="ui-nav-list">
  <a href="#" class="ui-nav-list__item multiline is-selected">
    <h4 class="ui-nav-list__item__title">List item title</h4>
    <span class="ui-nav-list__item__description">Praesent id metus massa, ut.</span>
    <span class="ui-nav-list__item__right-arrow icon-righthead-3"></span>
  </a>
  <a href="#" class="ui-nav-list__item multiline">
    <h4 class="ui-nav-list__item__title">Another list item</h4>
    <span class="ui-nav-list__item__description">Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet.</span>
    <span class="ui-nav-list__item__right-arrow icon-righthead-3"></span>
  </a>
  <a href="#" class="ui-nav-list__item multiline">
    <h4 class="ui-nav-list__item__title">List item title</h4>
    <span class="ui-nav-list__item__description">Nulla facilisi. Duis aliquet egestas purus in blandit.</span>
    <span class="ui-nav-list__item__right-arrow icon-righthead-3"></span>
  </a>
</nav>

Bar navigation

A horizontal bar of dropdown navigation components. This could be refactored with global nav.

<header class="ui-local-header">
  <nav class="ui-nav-bar">
    <div class="ui-nav-bar__item ui-dropdown">
      <a class="ui-nav-bar__item__toggle">Help</a>
      <div class="ui-dropdown__target">
        <ul class="ui-dropdown__list">
          <li><a href="#">Item one</a></li>
          <li><a href="#">Item two</a></li>
          <li><a href="#">Item three</a></li>
          <li><a href="#">Item four</a></li>
        </ul>
      </div>
    </div>
    <div class="ui-nav-bar__item ui-dropdown">
      <a class="ui-nav-bar__item__toggle">Share</a>
      <div class="ui-dropdown__target">
        <ul class="ui-dropdown__list">
          <li><a href="#">Item one</a></li>
          <li><a href="#">Item two</a></li>
          <li><a href="#">Item three</a></li>
          <li><a href="#">Item four</a></li>
        </ul>
      </div>
    </div>
    <div class="ui-nav-bar__item ui-dropdown">
      <a class="ui-nav-bar__item__toggle">Download</a>
      <div class="ui-dropdown__target">
        <ul class="ui-dropdown__list">
          <li><a href="#">Item one</a></li>
          <li><a href="#">Item two</a></li>
          <li><a href="#">Item three</a></li>
          <li><a href="#">Item four</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

Tabbed navigation

Tabbed navigation is for lower-level tabbed navigation. Tabs align left, and can accomodate optional content (such as a search field) to the right. Tabs can support icons and badges. Tabs can be located in a card, used in place of ui-card__header.

<div class="ui-nav-tabs-container">
  <nav class="ui-nav-tabs">
    <a href="#" class="ui-nav-tabs__tab is-selected">Tab option 1</a>
    <a href="#" class="ui-nav-tabs__tab">Tab option 2</a>
    <a href="#" class="ui-nav-tabs__tab">Tab option 2</a>
    <div class="ui-nav-tabs-shadow-container"><div class="ui-nav-tabs-shadow"></div></div>
  </nav>
<div>

Minimal Tabs

Tabs with minimal modifier

<nav class="ui-nav-tabs minimal">
  <a href="#" class="ui-nav-tabs__tab is-selected">Tab option 1</a>
  <a href="#" class="ui-nav-tabs__tab">Tab option 2</a>
  <a href="#" class="ui-nav-tabs__tab">Tab option 2</a>
</nav>

Badges

Badges highlight new or un-acted on items in tabs and other navigation components.

<nav class="ui-nav-tabs">
  <a href="#" class="ui-nav-tabs__tab is-selected">
    Tab option 1
    <span class="ui-badge">1</span>
  </a>
  <a href="#" class="ui-nav-tabs__tab">
    Tab option 2
    <span class="ui-badge">10</span>
  </a>
</nav>
<nav class="ui-nav-list">
  <h4>List 1 title</h4>
  <a href="#" class="ui-nav-list__item is-selected">
    List item 1.1
    <span class="ui-badge pull-right positive">1</span>
  </a>
  <a href="#" class="ui-nav-list__item">
    List item 1.2
    <span class="ui-badge pull-right negative">100+</span>
  </a>
  <a href="#" class="ui-nav-list__item">List item 1.3</a>
  <a href="#" class="ui-nav-list__item">List item 1.4</a>
  <a href="#" class="ui-nav-list__item">List item 1.5</a>
</nav>

Graphtype

<!-- Summary Reports -->
<div class="ui-graphtype ui-button-group">
  <button class="ui-graphtype__percentage ui-button is-selected" data-hint="Percentage">
    <span class="ui-graphtype__icon"></span>
  </button>
  <button class="ui-graphtype__stacked ui-button" data-hint="Stacked">
    <span class="ui-graphtype__icon"></span>
  </button>
  <button class="ui-graphtype__line ui-button" data-hint="Line">
     <span class="ui-graphtype__icon"></span>
  </button>
  <button class="ui-graphtype__pie ui-button" data-hint="Pie chart">
    <span class="ui-graphtype__icon"></span>
  </button>
  <button class="ui-graphtype__bar ui-button" data-hint="Bar chart">
    <span class="ui-graphtype__icon"></span>
  </button>
</div>
<!-- Comparisions -->
<div class="ui-graphtype ui-button-group">
  <button class="ui-graphtype__distribution ui-button is-selected" data-hint="Distribution">
    <span class="ui-graphtype__icon"></span>
  </button>
  <button class="ui-graphtype__stacked-bar ui-button" data-hint="Stacked bar">
     <span class="ui-graphtype__icon"></span>
  </button>
  <button class="ui-graphtype__percentage-bar ui-button" data-hint="Percentage bar">
     <span class="ui-graphtype__icon"></span>
  </button>
</div>
<!-- New types -->
<div class="ui-graphtype ui-button-group">
  <button class="ui-graphtype__treemap ui-button" data-hint="Treemap">
    <span class="ui-graphtype__icon"></span>
  </button>
  <button class="ui-graphtype__horizontal-stack ui-button" data-hint="Horizontal bar chart">
    <span class="ui-graphtype__icon"></span>
  </button>
  <button class="ui-graphtype__table ui-button" data-hint="Table">
    <span class="ui-graphtype__icon"></span>
  </button>
  <button class="ui-graphtype__sankey ui-button" data-hint="Sankey">
    <span class="ui-graphtype__icon"></span>
  </button>
</div>

Breadcrumbs

Navigation within applications

<nav class="ui-breadcrumbs">
  <a class="ui-breadcrumbs__item icon-og20-1">OpenGov</a>
  <a class="ui-breadcrumbs__item">Child page</a>
  <span class="ui-breadcrumbs__item ui-breadcrumbs__dropdown-toggle">
    Child page
    <div class="ui-dropdown__target">
      <header class="ui-dropdown__header">
        <h4>Breadcrumbs options</h4>
      </header>
      <ul class="ui-dropdown__list">
        <li><a href="#">Item one</a></li>
        <li><a href="#">Item two</a></li>
        <li><a href="#">Item three</a></li>
        <li><a href="#">Item four</a></li>
      </ul>
    </div>
  </span>
</nav>

Header

New API Key

<header class="ui-main__header">
  <nav class="ui-breadcrumbs">
    <a class="ui-breadcrumbs__item icon-og20-1">OpenGov</a>
    <a class="ui-breadcrumbs__item">Child page</a>
    <span class="ui-breadcrumbs__item ui-breadcrumbs__dropdown-toggle">
      Child page
      <div class="ui-dropdown__target">
        <header class="ui-dropdown__header">
          <h4>Breadcrumbs options</h4>
        </header>
        <ul class="ui-dropdown__list">
          <li><a href="#">Item one</a></li>
          <li><a href="#">Item two</a></li>
          <li><a href="#">Item three</a></li>
          <li><a href="#">Item four</a></li>
        </ul>
      </div>
    </span>
  </nav>
  <div class="ui-main__actions">
    <a class="ui-button primary">New API Key</a>
  </div>
</header>