Styleguide

Navigation

Default

%nav.navigationbar
  .fluid-container
    .navigationbar__header
      %a.navigationbar__header__logo{href: "/"} Brand
    .navigationbar__toggle
      .navigationbar__toggle__element
        %i.fa.fa-bars
      %input.navigationbar__toggle__helper{type: "checkbox"}/
      %ul.navigationbar__navigation
        %li.navigationbar__item
          %a.navigationbar__link{href: "/about"} About
        %li.navigationbar__item
          %a.navigationbar__link{href: "/login"} Sign in
<nav class='navigationbar'>
  <div class='fluid-container'>
    <div class='navigationbar__header'>
      <a class='navigationbar__header__logo' href='/'>Brand</a>
    </div>
    <div class='navigationbar__toggle'>
      <div class='navigationbar__toggle__element'>
        <i class='fa fa-bars'></i>
      </div>
      <input class='navigationbar__toggle__helper' type='checkbox'>
      <ul class='navigationbar__navigation'>
        <li class='navigationbar__item'>
          <a class='navigationbar__link' href='/about'>About</a>
        </li>
        <li class='navigationbar__item'>
          <a class='navigationbar__link' href='/login'>Sign in</a>
        </li>
      </ul>
    </div>
  </div>
</nav>