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
<nav class="sgds-breadcrumb" aria-label="breadcrumbs">
        <li><a href="">HOME</a></li>
        <li><a href="">LINK 1</a></li>
        <li><a href="">LINK 2</a></li>

Breadcrumb with Background Color
<nav class="sgds-breadcrumb has-background-dark" aria-label="breadcrumbs">
        <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>


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


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

Chat with the team