Breadcrumb is a navigation aid that display a user's location on a website as a row of links, usually around the top of the page


Default Breadcrumb
Usage
<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>

Breadcrumb with Background Color
Usage
<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>

Guidelines

Breadcrumb should:

  • Not replace primary navigation with breadcrumb
  • Not be used if all the pages are on the same level
  • Use to show hierarchy and not history
  • Be located in the top half of your web page
  • Progress from the highest level to the lowest
  • Always start with the homepage and end with the current page

Feedback

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

Chat with the team