Overview

Usually placed at the top of web pages, breadcrumbs help users to navigate and understand where they are on the current website or service.


Types

1) Default Breadcrumbs

<nav class="sgds-breadcrumb" aria-label="breadcrumbs">
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">LINK 1</a></li>
        <li><a href="">LINK 2</a></li>
    </ul>
</nav>

2) Breadcrumb with alternative seperators:

With Arrow
has-arrow-separator

<nav class="sgds-breadcrumb has-arrow-separator" aria-label="breadcrumbs">
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">LINK 1</a></li>
        <li><a href="">LINK 2</a></li>
    </ul>
</nav>

With Bullet
has-bullet-separator

<nav class="sgds-breadcrumb has-bullet-separator" aria-label="breadcrumbs">
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">LINK 1</a></li>
        <li><a href="">LINK 2</a></li>
    </ul>
</nav>

With Dot
has-dot-separator

<nav class="sgds-breadcrumb has-dot-separator" aria-label="breadcrumbs">
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">LINK 1</a></li>
        <li><a href="">LINK 2</a></li>
    </ul>
</nav>

With Succeeds
has-succeeds-separator

<nav class="sgds-breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">LINK 1</a></li>
        <li><a href="">LINK 2</a></li>
    </ul>
</nav>

3) Breadcrumb with Background Color

<nav class="sgds-breadcrumb has-background-dark padding" aria-label="breadcrumbs">
    <ul>
        <li><a href="" class="has-text-white">HOME</a></li>
        <li><a href="" class="has-text-white" href="">LINK 1</a></li>
        <li><a href="" class="has-text-white" href="">LINK 2</a></li>
    </ul>
</nav>

When to use

Breadcrumbs should be used for:
  • Enabling users to understand their current position on the website.
  • Helping users to move between different levels.
Breadcrumbs should not be used for:
  • A replacement for your primary navigation.
  • Displaying progress such as completing a transaction .
    • Using the progress bar component would be more appropriate.
  • When you have multiple navigation items on the website or page such as side nav
    • You may want to consider if using the breadcrumb component is necessary.

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component