Navigation

HTML

A navigation enables users to move around an app, visiting areas that are currently not in view.

The component is a custom Vue component written in semantic markup, and comes in default, with Icons, and toned in color styles.

Basic

HTML
    <nav class="nav">
  <ul>
    <li>
      <a href="/docs/navigation" class="is-active">Navigation</a>
    </li>
    <li>
      <a href="/docs/breadcrumbs">Breadcrumbs</a>
    </li>
    <li>
      <a href="/docs/message">Message</a>
    </li>
    <li>
      <a href="/docs/empty-state">Empty State</a>
    </li>
  </ul>
</nav>
  

With icons

HTML
    <nav class="nav">
  <ul>
    <li>
      <a href="/docs/navigation" class="is-active">
        <span class="icon-integrations"></span> Navigation
      </a>
    </li>

    <li>
      <a href="/docs/breadcrumbs">
        <span class="icon-theme"></span> Breadcrumbs
      </a>
    </li>

    <li>
      <a href="/docs/message">
        <span class="icon-rules"></span> Message
      </a>
    </li>

    <li>
      <a href="/docs/empty-state">
        <span class="icon-code"></span> Empty State
      </a>
    </li>
  </ul>
</nav>
  

Align center

HTML
    <nav class="nav nav--center">
  <ul>
    <li>
      <a href="/docs/navigation" class="is-active">Navigation</a>
    </li>
    <li>
      <a href="/docs/breadcrumbs">Breadcrumbs</a>
    </li>
    <li>
      <a href="/docs/message">Message</a>
    </li>
    <li>
      <a href="/docs/empty-state">Empty State</a>
    </li>
  </ul>
</nav>
  

Align right

HTML
    <nav class="nav nav--right">
  <ul>
    <li>
      <a href="/docs/navigation" class="is-active">Navigation</a>
    </li>
    <li>
      <a href="/docs/breadcrumbs">Breadcrumbs</a>
    </li>
    <li>
      <a href="/docs/message">Message</a>
    </li>
    <li>
      <a href="/docs/empty-state">Empty State</a>
    </li>
  </ul>
</nav>
  

Toned in color

HTML
    <nav class="nav nav--color-{color}">
  <ul>
    <li>
      <a href="/docs/navigation" class="is-active">Navigation</a>
    </li>
    <li>
      <a href="/docs/breadcrumbs">Breadcrumbs</a>
    </li>
    <li>
      <a href="/docs/message">Message</a>
    </li>
    <li>
      <a href="/docs/empty-state">Empty State</a>
    </li>
  </ul>
</nav>
  

Disabled item

HTML
    <nav class="nav">
  <ul>
    <li>
      <a href="/docs/navigation" class="is-active">Navigation</a>
    </li>
    <li>
      <a href="/docs/breadcrumbs">Breadcrumbs</a>
    </li>
    <li>
      <a href="/docs/message">Message</a>
    </li>
    <li>
      <a href="/docs/empty-state" class="is-disabled">Empty State</a>
    </li>
  </ul>
</nav>
  

Usage

Attribute Description Possible values Type Required Default
color Set with .nav--color-{color} See Colors page String - -
icon Add an icon to a navigation item like .icon-{icon-name} See Icons page String - -
disabled Disable a navigation item. Set with .is-disabled on a tag is-disabled String - -