Navigation

Available Sass Variables and default values

$navigation-logo-width: 220px
$navigation-top-height: 50px
$navigation-top-background-color: $thunder
$navigation-top-right-padding: 20px
$navigation-top-border-bottom: none

$navigation-side-width: 220px
$navigation-side-link-padding: 10px 0 10px 30px
$navigation-side-background-color: $mine-shaft
$navigation-side-border-right: none

$navigation-side-divider-padding: 10px 0 10px 30px
$navigation-side-divider-color: $text-color
$navigation-side-divider-background-color: darken($navigation-side-background-color, 10%)

$navigation-inactive-color: $silver-chalice
$navigation-inactive-font-weight: normal
$navigation-inactive-background-color: $navigation-side-background-color

$navigation-inactive-color-hover: white
$navigation-inactive-background-color-hover: shade($navigation-side-background-color, 10%)

$navigation-active-color: $cod-gray
$navigation-active-font-weight: bold
$navigation-active-background-color: #FFF
$navigation-active-background-color-hover: #FFF

$navigation-active-decorator-background-color: $brand-primary
$navigation-active-decorator-width: 3px
$navigation-active-decorator-height: 100%
$navigation-active-decorator-border-radius: 0
$navigation-active-decorator-left-offset: 0

$navigation-top-mobile-toggle-color: $brand-primary
$navigation-top-mobile-toggle-color-hover: $brand-tertiary
$navigation-top-mobile-toggle-margin: 10px
$navigation-top-mobile-color: $navigation-inactive-color
$navigation-top-mobile-color-hover: $navigation-inactive-color-hover
$navigation-top-mobile-background-color: $navigation-side-background-color
$navigation-top-mobile-background-color-hover: $navigation-inactive-background-color-hover

Examples

Basic Top Navigation

The markup below will give you a basic header

nav#top-nav
  .container-fluid
    .navbar-header
      = link_to components_path, class: "navbar-brand" do
        | LOGO IMAGE

If you would like more than just a logo, you can use .navbar-left and .navbar-right to add content

  nav#top-nav
    .container-fluid
      .navbar-header
        = link_to components_path, class: "navbar-brand" do
          | LOGO IMAGE

        .navbar-left
          input placeholder="Search"

        .navbar-right
          button.btn.btn-primary Sign Up

To add a mobile menu, you'll need to add a trigger that is only visible on xs screens, as well as a #mobile-menu element. You may also want to hide the .navbar-left and .navbar-right elements on xs screens.

  nav#top-nav
    .container-fluid
      .navbar-header
        = link_to components_path, class: "navbar-brand" do
          | LOGO IMAGE

        .navbar-left.hidden-xs
          input placeholder="Search"

        .navbar-right.hidden-xs
          button.btn.btn-primary Sign Up

        .navbar-right.visible-xs
          a#toggle-mobile-nav
            span.bar
            span.bar
            span.bar

  #mobile-menu.collapse.visible-xs.active-with-bar
    ul
      li Mobile Item 1
      li Mobile Item 2

The top and sidebar menus are fixed by default, meaning the rest of the page scrolls, but the navigation stays consistent. If you want to change the navigation to scroll with the page, add .menu-scroll to the html element of the layout

Basic Sidebar Navigation

The markup below will give you a basic sidebar menu

#side-nav
  ul
    li: a Link 1
    li: a Link 2
    li.active: a Link 3
    li: a Link 4

By default, there are no decorators on active links. The background color, text color and font weight can be customized.

Active links can be decorated by adding .active-with-bar or .active-with-disc Bar decorated links provide a full-link-height pseudo element that can be positioned and resized horizontally and colored as needed. Disc decorated links provide a vertically-centered pseudo element that can also be colored, resized, rounded, and positioned horizontally.

#side-nav.active-with-bar
  ul
    li: a Link 1
    li: a Link 2
    li.active: a Link 3
    li: a Link 4

Managing Menus

A good strategy for making sure navigation works on desktop, tablet, and mobile is to split up the navigation links into multiple partials. Each partial should represent one navigation area (account settings dropdown, sidebar, links in header, etc) and should contain list items only.

_mobile_only.slim

li: a Download App
li: a Share with QR Code

_side_bar.slim

li: a Dashboard
li: a Reports

_account_settings.slim

li: a Account Settings
li: a Manage Subscription
li: a Sign Out

These partials can then easily be reused so mobile navigation has all links.

nav#top-nav
  .container-fluid
    .navbar-header
      = link_to components_path, class: "navbar-brand" do
        | LOGO IMAGE

      .navbar-left.hidden-xs
        input placeholder="Search"

      .navbar-right.hidden-xs
        button.btn.btn-primary Sign Up

      .navbar-right.visible-xs
        a#toggle-mobile-nav
          span.bar
          span.bar
          span.bar

#mobile-menu.collapse.visible-xs.active-with-bar
  ul
    = "shared/navigation/mobile_only" rescue nil
    = "shared/navigation/account_settings" rescue nil
    = "shared/navigation/side_bar" rescue nil