Breadcrumbs

Overview

Breadcrumbs are a navigational aid displayed as a row of links at the top of the page. They help users understand where they are within the website’s structure and to move between levels.

On large screen sizes (e.g. desktop computers), breadcrumbs truncate into ellipsis when there are more than 4 pages. On smaller screen sizes (e.g. mobile phones), breadcrumbs are replaced with a link to the parent page.

Code

<div class="qg-global-breadcrumb qg-breadcrumb">
  <div class="container-fluid qg-site-width">
    <nav id="qg-breadcrumb" aria-label="breadcrumb" class="qg-breadcrumb-nav row">
      <ol class="qg-breadcrumb-list">
        <li class="qg-breadcrumb-list-item">
          <a href="/" class="qg-breadcrumb-list-item__link">
            Home
          </a>
        </li>
        <li class="qg-breadcrumb-list-item">
          <a href="#" class="qg-breadcrumb-list-item__link">
            Community support
          </a>
        </li>
        <li class="qg-breadcrumb-list-item">
          <a href="#" class="qg-breadcrumb-list-item__link">
            Cost of living support
          </a>
        </li>
        <li class="qg-breadcrumb-list-item">
          <a href="#" class="qg-breadcrumb-list-item__link">
            Concessions
          </a>
        </li>
        <li class="qg-breadcrumb-list-item">
          <a href="#" class="qg-breadcrumb-list-item__link">
            Energy concessions
          </a>
        </li>
        <li class="qg-breadcrumb-list-item">
          <span aria-current="page">
            Electricity asset ownership dividend
          </span>
        </li>
      </ol>
    </nav>
  </div>
</div>