SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information

Breadcrumb

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