Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content.

Basic

              Copied!
              content_copy
              
  <nav class="breadcrumbs">
    <a href="#!" class="segment">First</a>
    <a href="#!" class="segment">Second</a>
    <a href="#!" class="segment">Third</a>
  </nav>
              
            

Flat

For transparent background breadcrumb.

              Copied!
              content_copy
              
  <nav class="breadcrumbs flat">
    <a href="#!" class="segment">First</a>
    <a href="#!" class="segment">Second</a>
    <a href="#!" class="segment">Third</a>
  </nav>
              
            

Compact

For shorter height breadcrumb.

              Copied!
              content_copy
              
  <nav class="breadcrumbs compact">
    <a href="#!" class="segment">First</a>
    <a href="#!" class="segment">Second</a>
    <a href="#!" class="segment">Third</a>
  </nav>
  <nav class="breadcrumbs flat compact">
    <a href="#!" class="segment">First</a>
    <a href="#!" class="segment">Second</a>
    <a href="#!" class="segment">Third</a>
  </nav>
              
            

Slash Separator

For slash separator instead of chevron.

  <nav class="breadcrumbs slash">
    <a href="#!" class="segment">First</a>
    <a href="#!" class="segment">Second</a>
    <a href="#!" class="segment">Third</a>
  </nav>