Navs

Basic

With a basic nav you will probably want to apply a custom width to the .c-nav element, otherwise it will appear with 100% width.

<ul class="c-nav">
<li class="c-nav__content">MY APP</li>
<li class="c-nav__item c-nav__item--success c-nav__item--active">Create New</li>
<li class="c-nav__item">Home</li>
<li class="c-nav__item c-nav__item--primary">About</li>
<li class="c-nav__item c-nav__item--secondary">News</li>
<li class="c-nav__item c-nav__item--error">Help</li>
</ul>

Inline nav (with right aligned item)

<ul class="c-nav c-nav--inline">
  <li class="c-nav__item">Home</li>
  <li class="c-nav__item">News</li>
  <li class="c-nav__item c-nav__item--right">Contact</li>
</ul>

Absolute positions

.c-nav--top or .c-nav--bottom

Fix the nav to the top or bottom of the parent element, best used with .c-nav--inline.

.c-nav--left or .c-nav--right

Fix the nav to the left or right of the parent element, you must apply a width otherwise it will consume the entire container!

Fixed position

.c-nav--fixed

Fix the nav in position so that it doesn't move on scroll.

Shadows

.c-nav--high, .c-nav--higher and .c-nav--highest

Add these modifiers will give the nav the appearance that it is hovering above the page.

Animation

Apply the .a-nav class to the .c-nav block to enable animation on the nav item elements.

--slow, --fast

Every animation comes with slow and fast modifiers.