Breadcrumb

Overview

Breadcrumbs, typically placed at the top of web pages, aid users in navigation by helping users understand where they are on the current website or service.


Default Breadcrumb

<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>

When you should use this component

The breadcrumb component should be used when you need to help users understand where they are in the website and move between different levels.

When you should consider something else

Breadcrumbs must not be used as a replacement for your primary navigation. It should also not be used to display progress such as completing a transaction. In those cases, using the progress bar component would be more appropriate

If you have multiple navigational items on the website or page such as side nav, you may want to evaluate whether using the breadcrumb component is necessary.


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>

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>

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team