Logo Mark
Elements
Interface

Navigation

Header Nav Bar

Logo Mark Style Guide
Dropdown
Link Item
Dropdown Right 
%header.navigation
  %a.brand{ href: '/' }= partial 'svgs/mark'
  %a.nav-application-name Style Guide
  .nav
    .dropdown-toggle
      Dropdown |
      %ul.dropdown-menu
        %li
          %a{ href: '/elements/navigation' } Dropdown Item
        %li
          %a{ href: '/elements/navigation' } Dropdown Item
    %a{ href: '/elements/navigation' } Link Item
    .dropdown-toggle
      Dropdown Right |
      %ul.dropdown-menu{ data: { anchor: 'right' } }
        %li
          %a{ href: '/elements/navigation' } Dropdown Item
        %li
          %a{ href: '/elements/navigation' } Dropdown Item

Tabs

.tabs-overflow-indicator-left // (optional)
.tabs
%ul.tabs-overflow><
  %li.tab-item><
    %a{href: '/elements/navigation'}< Overview
  %li.tab-item.is-active><
    %a{href: '/elements/navigation'}< Artworks
  %li.tab-item><
    %a{href: '/elements/navigation'}< Locations
  %li.tab-item><
    %a{href: '/elements/navigation'}< Documents
  %li.tab-item><
    %a{href: '/elements/navigation'}< Contacts
.tabs-overflow-indicator-right // (optional)

Breadcrumbs

Home
Section
And Another Section
Even More Sections
Active Section
.section-breadcrumb.clearfix
  .section-breadcrumb-link
    %a{ href: "#" } Home
  .section-breadcrumb-separator.icon-chevron-right
  .section-breadcrumb-link
    %a{ href: "#" } Section
  .section-breadcrumb-separator.icon-chevron-right
  .section-breadcrumb-link
    %a{ href: "#" } And Another Section
  .section-breadcrumb-separator.icon-chevron-right
  .section-breadcrumb-link
    %a{ href: "#" } Even More Sections
  .section-breadcrumb-separator.icon-chevron-right
  .section-breadcrumb-title Active Section