Breadcrumb

Breadcrumb is a component that helps users understand where they are on in the website.


Default Breadcrumb
Component Code
<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 Background Color
Component Code
<nav class="sgds-breadcrumb has-background-dark" aria-label="breadcrumbs">
    <ul>
        <li><a class="has-text-white" href="">HOME</a></li>
        <li><a class="has-text-white" href="">LINK 1</a></li>
        <li><a 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