Breadcrumbs

Breadcrumbs help users understand their location within the site hierarchy and navigate back to parent pages.

Example

<nav aria-label="Breadcrumb">
  <ol class="breadcrumbs">
    <li><a href="/">Home</a></li>
    <li><a href="/government">Government</a></li>
    <li><a href="/government/ministries">Ministries</a></li>
    <li><span aria-current="page">Current Page</span></li>
  </ol>
</nav>

Short Breadcrumb

Usage Guidelines

When to use

• On pages more than 2 levels deep in the site hierarchy
• When users need to navigate back to parent sections
• In combination with other navigation (not as a replacement)

When not to use

• On the homepage
• On very simple sites with flat structure
• As the only means of navigation

Do

• Start with "Home" as the first item
• Show the current page as the last item (not linked)
• Use consistent separator characters (/)
• Keep breadcrumb text concise
• Place breadcrumbs at the top of the page, below the header

Don't

• Don't link the current page
• Don't use breadcrumbs as a replacement for proper navigation
• Don't show more than 5-6 levels (truncate if needed)

Accessibility

• Use <nav> with aria-label="Breadcrumb"
• Use an ordered list (<ol>) for semantic structure
• Mark the current page with aria-current="page"
• Hide separators from screen readers with aria-hidden="true"
• Links have visible focus states

HTML Structure

<nav aria-label="Breadcrumb">
  <ol class="breadcrumbs">
    <li>
      <a href="/">Home</a>
      <span aria-hidden="true">/</span>
    </li>
    <li>
      <a href="/section">Section</a>
      <span aria-hidden="true">/</span>
    </li>
    <li>
      <span aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>