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--brand">About</li>
<li class="c-nav__item c-nav__item--info">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

Add the standard elevation modifiers to give the nav the appearance that it is hovering above the page.

Images

Navs support images really well too. Just wrap your .o-image inside a .c-nav__content element.