Navs

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.

Basic

  • MY APP
  • Create New
  • Home
  • About
  • News
  • Help
<ul class="c-nav" style="width: 280px;">
  <li class="c-nav__content u-centered c-text--loud">MY APP</li>
  <li class="c-nav__item c-nav__item--success c-nav__item--active"><i class="fas fa-plus"></i> Create New</li>
  <li class="c-nav__item"><i class="fas fa-home"></i> Home</li>
  <li class="c-nav__item c-nav__item--brand"><i class="fas fa-question-circle"></i> About</li>
  <li class="c-nav__item c-nav__item--info"><i class="fas fa-star"></i> News</li>
  <li class="c-nav__item c-nav__item--error"><i class="fas fa-life-ring"></i> Help</li>
</ul> 

Inline nav (with right aligned item)

  • Home
  • News
  • Contact
<ul class="c-nav c-nav--inline">
  <li class="c-nav__item"><i class="fas fa-home"></i> Home</li>
  <li class="c-nav__item"><i class="fas fa-star"></i> News</li>
  <li class="c-nav__item c-nav__item--right"><i class="fas fa-user"></i> 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.

    Home News Contact
<ul class="c-nav c-nav--inline u-highest">
  <span class="c-nav__item"><i class="fas fa-home"></i> Home</span>
  <span class="c-nav__item"><i class="fas fa-star"></i> News</span>
  <span class="c-nav__item c-nav__item--right"><i class="fas fa-user"></i> Contact</span>
</ul> 

Images

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

    Home News Contact
<ul class="c-nav c-nav--inline">
  <span class="c-nav__content u-window-box-none">
    <img class="o-image" src="https://source.unsplash.com/random/100x100">
  </span>
  <span class="c-nav__item"><i class="fas fa-home"></i> Home</span>
  <span class="c-nav__item"><i class="fas fa-star"></i> News</span>
  <span class="c-nav__item c-nav__item--right"><i class="fas fa-user"></i> Contact</span>
</ul> 

Light variation

  • Home
  • News
  • Contact
<ul class="c-nav c-nav--light c-nav--inline">
  <li class="c-nav__item"><i class="fas fa-home"></i> Home</li>
  <li class="c-nav__item"><i class="fas fa-star"></i> News</li>
  <li class="c-nav__item c-nav__item--right"><i class="fas fa-user"></i> Contact</li>
</ul>