# 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;
            }
        }
    }