Skip to main content
Breadcrumb navigation shows the user’s location within the site hierarchy. It uses semantic HTML with <nav> and ordered lists.

​
Basic Usage

Use a semantic breadcrumb <nav> with an ordered list and aria-current="page" for the active item. 
<nav aria-label="Breadcrumb">
  <ol class="unstyled hstack" style="font-size: var(--text-7)">
    <li><a href="#" class="unstyled">Home</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="#" class="unstyled">Projects</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="#" class="unstyled">Oat Docs</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="#" class="unstyled" aria-current="page"><strong>Breadcrumb</strong></a></li>
  </ol>
</nav>

​
Structure

1

Wrap in nav

Use <nav aria-label="Breadcrumb"> for semantic navigation
2

Use ordered list

Breadcrumbs represent a hierarchy, so use <ol> instead of <ul>
3

Add links

Each breadcrumb item should be a link, except optionally the last one
4

Mark current page

Add aria-current="page" to the current page link
5

Add separators

Use <li aria-hidden="true">/</li> for visual separators

​
Classes Used

​
unstyled
class
Removes default list styling and link underlines
​
hstack
class
Creates a horizontal stack layout with appropriate spacing

​
Accessibility

The aria-label="Breadcrumb" on the <nav> element helps screen readers identify the navigation type.
Use aria-current="page" on the last link to indicate the current page location. This is more semantic than using aria-disabled or removing the link.
Separators use aria-hidden="true" so screen readers don’t announce them, providing a cleaner experience.
Using <ol> instead of <ul> better represents the hierarchical nature of breadcrumbs.

​
Custom Separators

You can use different separator characters or icons: 
<!-- Arrow separator -->
<nav aria-label="Breadcrumb">
  <ol class="unstyled hstack" style="font-size: var(--text-7)">
    <li><a href="#" class="unstyled">Home</a></li>
    <li aria-hidden="true">&rarr;</li>
    <li><a href="#" class="unstyled">Projects</a></li>
    <li aria-hidden="true">&rarr;</li>
    <li><a href="#" class="unstyled" aria-current="page"><strong>Current</strong></a></li>
  </ol>
</nav>

<!-- Chevron separator -->
<nav aria-label="Breadcrumb">
  <ol class="unstyled hstack" style="font-size: var(--text-7)">
    <li><a href="#" class="unstyled">Home</a></li>
    <li aria-hidden="true">&gt;</li>
    <li><a href="#" class="unstyled">Projects</a></li>
    <li aria-hidden="true">&gt;</li>
    <li><a href="#" class="unstyled" aria-current="page"><strong>Current</strong></a></li>
  </ol>
</nav>

​
Styling

The breadcrumb uses utility classes and CSS custom properties: 
<nav aria-label="Breadcrumb">
  <ol class="unstyled hstack" style="font-size: var(--text-7)">
    <!-- items -->
  </ol>
</nav>
Adjust the font size using CSS custom properties like var(--text-6) or var(--text-8) to match your design.

​
Best Practices

Keep it Simple

Don’t include too many levels - typically 3-5 levels max

Make Links Clear

Each breadcrumb should clearly indicate what page it links to

Current Page Optional

You can make the current page a non-clickable <span> instead of a link

Mobile Friendly

Consider showing only the parent page on mobile to save space

​
Non-Clickable Current Page

If you prefer the current page to not be a link: 
<nav aria-label="Breadcrumb">
  <ol class="unstyled hstack" style="font-size: var(--text-7)">
    <li><a href="#" class="unstyled">Home</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="#" class="unstyled">Projects</a></li>
    <li aria-hidden="true">/</li>
    <li aria-current="page"><strong>Current Page</strong></li>
  </ol>
</nav>