Breadcrumbs

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their location within programs, websites or documents.

Breadcrumbs layout with links can be separated by any symbol, for example > symbol.

The following markup corresponds to the accesibility demands:

<div class="example-breadcrumbs-1"> <span class="label" id="breadcrumb-label">You are here:</span> <ul class="items" aria-labelledby="breadcrumb-label"> <li class="item home"> <a title="Go to Home Page" href="#">Home</a> </li> <li class="item category1"> <a title="Category" href="#">Category</a> </li> <li class="item category2"> <a title="Category" href="#">Subcategory</a> </li> <li class="item category3"> <strong>Products</strong> </li> </ul> </div>

.example-breadcrumbs-1 {
    .lib-breadcrumbs();
}

Breadcrumbs variables

    

      

        
Mixin variable
        
Global variable
        
Default value
        
Allowed values
        
Comment
      
      

        
@_breadcrumbs-font-size
        
@breadcrumbs__font-size
        
@font-size__s
        
'' | false | value
        
Breadcrumbs font size
      
      

        
@_breadcrumbs-display
        
@breadcrumbs__display
        
false
        
'' | false | inline | block | inline-block
        
Breadcrumbs links display property
      
      

        
@_breadcrumbs__container-margin
        
@breadcrumbs__container-margin
        
 0 0 @indent__base
        
'' | false | value
        
Breadcrumbs items padding
      
      

        
@_breadcrumbs-padding
        
@breadcrumbs__padding
        
false
        
'' | false | value
        
Breadcrumbs items padding
      
      

        
Breadcrumbs - separator symbol
      
      

        
@_breadcrumbs-separator-symbol
        
@breadcrumbs-separator__symbol
        
false
        
'' | false | any symbol
        
Breadcrumbs separating symbol
      
      

        
@_breadcrumbs-separator-color
        
@breadcrumbs-separator__color
        
@breadcrumbs-current__color
        
'' | false | value
        
Breadcrumbs separating symbol color
      
     

        
@_breadcrumbs-icon-use
        
@breadcrumbs-icon__use
        
true
        
true | false
        
Breadcrumbs separating symbol is an icon
      
      

        
@_breadcrumbs-icon-font-content
        
@breadcrumbs-icon__font-content
        
@icon-next
        
'' | false | icon
        
Breadcrumbs separating icon symbol
      
      

        
@_icon-font
        
@breadcrumbs-icon__font
        
@icon-font
        
'' | false | font
        
Breadcrumbs separating icon font
      
      

        
@_icon-font-size
        
@breadcrumbs-icon__font-size
        
24px
        
'' | false | value
        
Breadcrumbs separating icon font size
      
      

        
@_icon-font-line-height
        
@breadcrumbs-icon__font-line-height
        
18px
        
'' | false | value
        
Breadcrumbs separating icon line height
      
      

        
@_icon-font-color
        
@breadcrumbs-icon__font-color
        
false
        
'' | false | value
        
Breadcrumbs separating icon color
      
      

        
@_icon-font-margin
        
@breadcrumbs-icon__font-margin
        
0
        
'' | false | value
        
Breadcrumbs separating icon margin
      
      

        
@_icon-font-vertical-align
        
@breadcrumbs-icon__font-vertical-align
        
top
        
'' | false | value
        
Breadcrumbs separating icon vertical align
      
      

        
Breadcrumbs - current page
      
      

        
@_breadcrumbs-current-color
        
@breadcrumbs-current__color
        
#a3a3a3
        
'' | false | value
        
Breadcrumbs current page color
      
      

        
@_breadcrumbs-current-font-weight
        
@breadcrumbs-current__font-weight
        
@font-weight__regular
        
'' | false | value
        
Breadcrumbs current page font weight
      
      

        
@_breadcrumbs-current-background
        
@breadcrumbs-current__background
        
false
        
'' | false | value
        
Breadcrumbs current page background
      
      

        
@_breadcrumbs-current-border
        
@breadcrumbs-current__border
        
false
        
'' | false | value
        
Breadcrumbs current page border
      
      

        
@_breadcrumbs-current-gradient
        
@breadcrumbs-current__gradient
        
false
        
true | false
        
Breadcrumbs current page have gradient background
      
      

        
@_breadcrumbs-current-gradient-direction
        
@breadcrumbs-current__gradient-direction
        
false
        
'' | false | vertical | horizontal
        
Direction of breadcrumbs current page background gradient (if there is any)
      
      

        
@_breadcrumbs-current-gradient-color-start
        
@breadcrumbs-current__gradient-color-start
        
false
        
'' | false | value
        
Breadcrumbs current page gradient start color
      
      

        
@_breadcrumbs-current-gradient-color-end
        
@breadcrumbs-current__gradient-color-end
        
false
        
'' | false | value
        
Breadcrumbs current page gradient end color
      
      

        
Breadcrumbs link
      
      

        
@_breadcrumbs-link-gradient
        
@breadcrumbs-link__gradient
        
false
        
true | false
        
Breadcrumbs items have gradient background
      
      

        
@_breadcrumbs-link-gradient-direction
        
@breadcrumbs-link__gradient-direction
        
false
        
'' | false | vertical | horizontal
        
Direction of breadcrumbs item background gradient (if there is any)
      
      

        
Breadcrumbs link - default
      
      

        
@_breadcrumbs-link-color
        
@breadcrumbs-link__color
        
@primary__color
        
'' | false | value
        
Breadcrumbs item color
      
      

        
@_breadcrumbs-link-background
        
@breadcrumbs-link__background
        
false
        
'' | false | value
        
Breadcrumbs item background
      
      

        
@_breadcrumbs-link-border
        
@breadcrumbs-link__border
        
false
        
'' | false | value
        
Breadcrumbs item border
      
      

        
@_breadcrumbs-link-text-decoration
        
@breadcrumbs-link__text-decoration
        
none
        
'' | false | value
        
Breadcrumbs item text decoration
      
      

        
@_breadcrumbs-link-gradient-color-start
        
@breadcrumbs-link__gradient-color-start
        
false
        
'' | false | value
        
Breadcrumbs item gradient start color
      
      

        
@_breadcrumbs-link-gradient-color-end
        
@breadcrumbs-link__gradient-color-end
        
false
        
'' | false | value
        
Breadcrumbs item gradient end color
      
      

        
Breadcrumbs link - visited
      
      

        
@_breadcrumbs-link-color-visited
        
@breadcrumbs-link__visited__color
        
@primary__color
        
'' | false | value
        
Breadcrumbs item visited color
      
      

        
@_breadcrumbs-link-background-visited
        
@breadcrumbs-link__visited__background
        
@breadcrumbs-link__background
        
'' | false | value
        
Breadcrumbs item visited background
      
      

        
@_breadcrumbs-link-border-visited
        
@breadcrumbs-link__visited__border
        
@breadcrumbs-link__border
        
'' | false | value
        
Breadcrumbs item visited border
      
      

        
@_breadcrumbs-link-text-decoration-visited
        
@breadcrumbs-link__visited__text-decoration
        
none
        
'' | false | value
        
Breadcrumbs item text decoration
      
      

        
@_breadcrumbs-link-gradient-color-start-visited
        
@breadcrumbs-link__visited__gradient-color-start
        
false
        
'' | false | value
        
Breadcrumbs item visited gradient start color
      
      

        
@_breadcrumbs-link-gradient-color-end-visited
        
@breadcrumbs-link__visited__gradient-color-end
        
false
        
'' | false | value
        
Breadcrumbs item visited gradient end color
      
      

        
Breadcrumbs link - hover
      
      

        
@_breadcrumbs-link-color-hover
        
@breadcrumbs-link__hover__color
        
@primary__color
        
'' | false | value
        
Breadcrumbs item hover color
      
      

        
@_breadcrumbs-link-background-hover
        
@breadcrumbs-link__hover__background
        
false
        
'' | false | value
        
Breadcrumbs item hover background
      
      

        
@_breadcrumbs-link-border-hover
        
@breadcrumbs-link__hover__border
        
@breadcrumbs-link__border
        
'' | false | value
        
Breadcrumbs item hover border
      
      

        
@_breadcrumbs-link-text-decoration-hover
        
@breadcrumbs-link__hover__text-decoration
        
underline
        
'' | false | value
        
Breadcrumbs item hover text decoration
      
      

        
@_breadcrumbs-link-gradient-color-start-hover
        
@breadcrumbs-link__hover__gradient-color-start
        
false
        
'' | false | value
        
Breadcrumbs item hover gradient start color
      
      

        
@_breadcrumbs-link-gradient-color-end-hover
        
@breadcrumbs-link__hover__gradient-color-end
        
false
        
'' | false | value
        
Breadcrumbs item hover gradient end color
      
      

        
Breadcrumbs link - active
      
      

        
@_breadcrumbs-link-color-active
        
@breadcrumbs-link__active__color
        
@primary__color
        
'' | false | value
        
Breadcrumbs item active color
      
      

        
@_breadcrumbs-link-background-active
        
@breadcrumbs-link__active__background
        
@breadcrumbs-link__background
        
'' | false | value
        
Breadcrumbs item active background
      
      

        
@_breadcrumbs-link-border-active
        
@breadcrumbs-link__active__border
        
@breadcrumbs-link__border
        
'' | false | value
        
Breadcrumbs item active border
      
      

        
@_breadcrumbs-link-text-decoration-active
        
@breadcrumbs-link__active__text-decoration
        
none
        
'' | false | value
        
Breadcrumbs item active text decoration
      
      

        
@_breadcrumbs-link-gradient-color-start-active
        
@breadcrumbs-link__active__gradient-color-start
        
false
        
'' | false | value
        
Breadcrumbs item active gradient start color
      
      

        
@_breadcrumbs-link-gradient-color-end-active
        
@breadcrumbs-link__active__gradient-color-end
        
false
        
'' | false | value
        
Breadcrumbs item active gradient end color
      
    
  

Button-styled breadcrumbs with gradient background, border, and no separating symbol

Set values for the following variables to:

hide separating symbol:

  @_breadcrumbs-separator-symbol: ''

set up links gradient background for default and hover state:

  @_breadcrumbs-link-gradient: true,
  @_breadcrumbs-link-gradient-direction: vertical,
  @_breadcrumbs-link-gradient-color-start: #f4f4f4,
  @_breadcrumbs-link-gradient-color-end: #ccc,
  @_breadcrumbs-link-gradient-color-start-hover: #ccc,
  @_breadcrumbs-link-gradient-color-end-hover: #f4f4f4

set up current page gradient background:

  @_breadcrumbs-current-gradient: true,
  @_breadcrumbs-current-gradient-color-start: #f7b32e,
  @_breadcrumbs-current-gradient-color-end: #ff5501

<div class="example-breadcrumbs-2"> <ul class="items"> <li class="item home"> <a title="Go to Home Page" href="#">Home</a> </li> <li class="item category1"> <a title="Category" href="#">Category</a> </li> <li class="item category2"> <a title="Category" href="#">Subcategory</a> </li> <li class="item category3"> <strong>Products</strong> </li> </ul> </div>

.example-breadcrumbs-2 {
    .lib-breadcrumbs(
        @_breadcrumbs-separator-symbol: '',
        @_breadcrumbs-display: inline-block,
        @_breadcrumbs-padding: 3px 5px,
        @_breadcrumbs-link-border: 1px solid #ccc,
        @_breadcrumbs-link-gradient: true,
        @_breadcrumbs-link-gradient-direction: vertical,
        @_breadcrumbs-link-gradient-color-start: #f4f4f4,
        @_breadcrumbs-link-gradient-color-end: #ccc,
        @_breadcrumbs-link-gradient-color-start-hover: #ccc,
        @_breadcrumbs-link-gradient-color-end-hover: #f4f4f4,
        @_breadcrumbs-link-text-decoration-hover: none,
        @_breadcrumbs-current-color: #1979c3,
        @_breadcrumbs-current-gradient: true,
        @_breadcrumbs-current-gradient-color-start: #f7b32e,
        @_breadcrumbs-current-gradient-color-end: #ff5501,
        @_breadcrumbs-current-border: 1px solid #d04b0a
    );
}

Breadcrumbs with solid background

Breadcrumbs with solid background and a triangle right on the right side, without separating symbol.

Set values for the following variables to:

hide separating symbol use:

  @_breadcrumbs-separator-symbol: ''

set up solid background for links for default and hover state:

  @_breadcrumbs-link-background: #f4f4f4,
  @_breadcrumbs-link-background-hover: #ccc

set up gradient background for current page:

  @_breadcrumbs-current-background: #e7e7e7,
  @_breadcrumbs-current-color: #333,

User can also add customization that was not provided with the breadcrumbs mixin. Here we can add solid arrow right for each link:

<div class="example-breadcrumbs-3"> <ul class="items"> <li class="item home"> <a title="Go to Home Page" href="#">Home</a> </li> <li class="item category1"> <a title="Category" href="#">Category</a> </li> <li class="item category2"> <a title="Category" href="#">Subcategory</a> </li> <li class="item category3"> <strong>Products</strong> </li> </ul> </div>

.example-breadcrumbs-3 {
    .lib-breadcrumbs(
        @_breadcrumbs-separator-symbol: '',
        @_breadcrumbs-display: inline-block,
        @_breadcrumbs-padding: 3px 5px,
        @_breadcrumbs-current-background: #e7e7e7,
        @_breadcrumbs-current-color: #333,
        @_breadcrumbs-link-text-decoration-hover: none,
        @_breadcrumbs-link-background: #f4f4f4,
        @_breadcrumbs-link-background-hover: #ccc
    );
    .item a {
        position: relative;
        margin: 0 11px 0 0;
        &:after {
            .lib-arrow(right, 12px, #f4f4f4);
            content: "";
            position: absolute;
            display: block;
            top: 0;
            right: -23px;
        }
        &:hover:after {
            border-color: transparent transparent transparent #ccc;
        }
    }
}