<h5>Default</h5>  
<nav>
  <div class="nav-wrapper">
    <div class="col s12">
      <a href="#!" class="breadcrumb">First</a>
      <a href="#!" class="breadcrumb">Second</a>
      <a href="#!" class="breadcrumb">Third</a>
    </div>
  </div>
</nav>

<h5>.clean</h5>
<nav class="clean">
  <div class="nav-wrapper">
    <div class="col s12">
      <a href="#!" class="breadcrumb">First</a>
      <a href="#!" class="breadcrumb">Second</a>
      <a href="#!" class="breadcrumb">Third</a>
      <a href="#!" class="breadcrumb">Fourth</a>
    </div>
  </div>
</nav>

<h5>.flat</h5>
<nav class="flat">
  <div class="nav-wrapper">
    <div class="col s12">
      <a href="#!" class="breadcrumb">First</a>
      <a href="#!" class="breadcrumb">Second</a>
      <a href="#!" class="breadcrumb">Third</a>
      <a href="#!" class="breadcrumb">Fourth</a>
    </div>
  </div>
</nav>

<h5>.round</h5>
<nav class="round">
  <div class="nav-wrapper">
    <div class="col s12">
      <a href="#!" class="breadcrumb">First</a>
      <a href="#!" class="breadcrumb">Second</a>
      <a href="#!" class="breadcrumb">Third</a>
      <a href="#!" class="breadcrumb">Fourth</a>
    </div>
  </div>
</nav>

<h5>.expand</h5>
<nav class="flat expand">
  <div class="nav-wrapper">
    <div class="col s12">
      <a href="#!" class="breadcrumb">First</a>
      <a href="#!" class="breadcrumb">Second</a>
      <a href="#!" class="breadcrumb">Third</a>
      <a href="#!" class="breadcrumb">Fourth</a>
    </div>
  </div>
</nav>

<h5>.dot</h5>
<nav class="dot">
  <div class="nav-wrapper">
    <div class="col s12">
      <a href="#!" class="breadcrumb">First</a>
      <a href="#!" class="breadcrumb">Second</a>
      <a href="#!" class="breadcrumb">Third</a>
      <a href="#!" class="breadcrumb">Fourth</a>
    </div>
  </div>
</nav>

$background : #f7585e
$background-last : lighten($background, 22%)
$color : rgb(255, 255, 255)

// Pagination Styles
nav
  
  // Clean
  &.clean
    background: none
    box-shadow: none
      
    .breadcrumb
      color: rgba(0,0,0,1)

      &:before
        color: rgba(0,0,0,0.7)
      
  // Flat
  &.flat
    box-shadow: none
    background: transparent
      
    .breadcrumb
      color: darken($color, 15%)
      display: inline-block
      padding-right: 1rem
      padding-left: calc(32px + 1rem)
      margin-left: -3px
      
      &:hover
        transition: background ease 0.3s
      
        &:after
          transition: border-left-color ease 0.3s, background ease 0.3s

      &:before
        display: none
      
      &:after
        content: ''
        display: inline-block
        position: absolute
        top: 0
        border: transparent 32px solid
        border-left-color: rgba(0,0,0,1)
        margin-left: 1rem
      
      &:nth-child(odd)
        background: darken($background, 2%)
        
        &:after
          border-left-color: darken($background, 2%)
        
        &:hover
          background: $background
        
          &:after
            border-left-color: $background
        
        &:last-child
          
          &:after
            border-color: darken($background, 2%)
        
      &:nth-child(even)
        background: lighten($background, 2%)
        
        &:after
          border-left-color: lighten($background, 2%)
        
        &:hover
          background: lighten($background, 4%)
        
          &:after
            border-left-color: lighten($background, 4%)
        
        &:last-child
          
          &:after
            border-color: lighten($background, 2%)
        
      &:last-child
        color: $color
      
        &:after
          border-left-width: 0
          
  
  &.round
    @extend .flat
    
    .breadcrumb
      
      &:after
        border-radius: 0 65px 65px 0
        width: 32px
        height: 64px
        background: $background
        border: none
      
      &:first-child
        border-top-left-radius: 10px
        border-bottom-left-radius: 10px
      
      &:nth-child(odd)
        
        &:after
          background: darken($background, 2%)
        
        &:hover
        
          &:after
            background: $background
        
        &:last-child
          
          &:after
            border-color: darken($background, 2%)
        
      &:nth-child(even)
        
        &:after
          background: lighten($background, 2%)
        
        &:hover
        
          &:after
            background: lighten($background, 4%)
        
        &:last-child
          
          &:after
            border-color: lighten($background, 2%)
        
      &:last-child
      
        &:after
          border-top-right-radius: 10px
          border-bottom-right-radius: 10px
        
  &.expand
    
    .breadcrumb
      color: transparent!important
      width: 0
      padding-left: 32px
      padding-right: 0
      transition: width ease 0.3s, padding-left ease 0.3s, padding-right ease 0.3s
      
      &:after
        margin-left: 0
        transition: margin-left ease 0.3s
      
      &:last-child,
      &:hover
        color: inherit!important
        width: auto
        padding-right: 1rem
        padding-left: calc(32px + 1rem)
        transition: width ease 0.3s, padding-left ease 0.3s, padding-right ease 0.3s
      
        &:after
          margin-left: 1rem
          transition: margin-left ease 0.3s

  &.dot
    background: none
    box-shadow: none
    
    a
      position: relative
      color: rgb(111, 111, 111)
      display: inline-block
      padding: 0 2.5rem
      
      &:hover
      
        &:before,
        &:first-child:before
          width: 12px
          height: 12px
          margin: 0 0 0 -6px
          bottom: -1px
        
      &:before,
      &:first-child:before
        content: ''
        position: absolute
        background: $background
        display: block
        width: 10px
        height: 10px
        margin: 0 0 0 -5px
        border-radius: 50%
        bottom: 0
        left: 50%
        z-index: 1
        transition: width ease-in 0.1s, height ease-in 0.1s, margin ease-in 0.1s, bottom ease-in 0.1s, 
      
      &:after
        content: ''
        position: absolute
        background: $background
        display: block
        width: calc(100% + 15px)
        height: 2px
        bottom: 4px
        left: 50%
      
      &:nth-last-child(2)
      
        &:after
          width: calc(100% + 5px)
          background: $background-last
      
      &:last-child
        color: rgb(0, 0, 0)
      
        &:hover
      
          &:before,
          &:first-child:before
            width: 10px
            height: 10px
            margin: 0 0 0 -5px
            bottom: 0px
      
        &:before
          background: $background-last
      
        &:after
          display: none

// Other stuff
body
  padding: 20px
  
  h5
    margin-top: 2em
    
    &:first-of-type
      margin-top: 0