Breadcrumb

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

Usage

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

Tell us more