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.
<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>
<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>
<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>
<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>
<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>
<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>
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 | - | - |
Made at Fomo