Get Orange

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="o-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="o-nav">
  <ul>
    <li>
      <a href="/docs/navigation" class="is-active">
        <span class="o-icon-integrations"></span> Navigation
      </a>
    </li>

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

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

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

Align center

HTML

    <nav class="o-nav o-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="o-nav o-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="o-nav o-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="o-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 `.o-nav--color-{color}`	See Colors page	String	-	-
icon	Add an icon to a navigation item like `.o-icon-{icon-name}`	See Icons page	String	-	-
disabled	Disable a navigation item. Set with `.is-disabled` on `a` tag	`is-disabled`	String	-	-