Breadcrumb

Beta Added in 2.0.0

Create breadcrumbs to show users their location within a website.

Usage

The Breadcrumb component consists of links, which are aligned side by side and separated by a divider. Add the .gls-breadcrumb class to a <ul> element to define the component. Use <a> elements as breadcrumb items within the list. An active state is automatically applied to the last <li> element.

To add list items without a link, use a <span> element instead of an <a>. Alternatively, disable an <a> element by adding the .gls-disabled class to the <li> element and remove the href attribute from the anchor to make it inaccessible through keyboard navigation.

<ul class="gls-breadcrumb">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><span></span></li>
</ul>

  • <ul class="gls-breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Linked Category</a></li>
    <li class="gls-disabled"><a>Disabled Category</a></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
</ul>

Guidelines

When to use

  • When the system has more than two layers in a hierarchy
  • When you need to inform the user of where they are
  • When the user may need to navigate back to a higher level
  • When the application has multi-layer architecture

When to consider something else

  • When your application only has one level of navigation

Accessibility

The breadcrumb component is wrapped in a nav element so that it is announced to assistive technologies. It is also a good idea to add aria-label attributes to the nav element and current page li that describes the navigation.

Resources

Style modifiers

There is a style modifier available. Just add one of the following classes to apply a different look.

Class Description
.gls-breadcrumb-primary Uses primary color for links.
.gls-breadcrumb-secondary Uses secondary color for links.
.gls-breadcrumb-tertiary Uses tertiary color for links. 
<ul class="gls-breadcrumb gls-breadcrumb-primary">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><span></span></li>
</ul>

  • <ul class="gls-breadcrumb gls-breadcrumb-primary">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="gls-disabled"><a>Disabled</a></li>
    <li><span>Active</span></li>
</ul>

<ul class="gls-breadcrumb gls-breadcrumb-secondary">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="gls-disabled"><a>Disabled</a></li>
    <li><span>Active</span></li>
</ul>

<ul class="gls-breadcrumb gls-breadcrumb-tertiary">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="gls-disabled"><a>Disabled</a></li>
    <li><span>Active</span></li>
</ul>