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.

Feedback

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

Chat with the team