Breadcrumbs

The <nys-breadcrumbs> component shows users their location within a site's structure and provides links to navigate back through parent pages.

Accessibility

The <nys-breadcrumbs> component includes the following accessibility-focused features:

• Proper semantic HTML with <nav> and <ol> elements.

• ARIA labels to identify the navigation as breadcrumbs.

• Separators hidden from screen readers to avoid repetitive announcements.

• Keyboard navigation support for all links.

  Additional accessibility test and build content is coming soon, in a new format.

Options

Basic Usage

Wrap an ordered list (<ol>) with links (<a>) inside <nys-breadcrumbs>. The last <li> should be plain text (the current page).

Note: If you prefer not to display the current page in the breadcrumb trail, simply leave it out.

<nys-breadcrumbs>
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/tickets">Ticket System</a></li>
    <li>Del Water Gap</li>
  </ol>
</nys-breadcrumbs>

Back to Parent (Mobile Only)

Add the backToParent prop to collapse the full breadcrumb trail into a single "back to parent" button on screens narrower than 767px. The component automatically determines which crumb represents the parent of the current page. Resize your browser to a small width to see it in action.

<nys-breadcrumbs backToParent>
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/government">Government</a></li>
    <li><a href="/government/agencies">Agencies</a></li>
    <li><a href="/government/agencies/parks">Parks & Recreation</a></li>
    <li><a href="/parks/state-parks">State Parks</a></li>
    <li><a href="/parks/state-parks/delaware">Delaware Region</a></li>
    <li><a href="/parks/state-parks/delaware/water-gap">Delaware Water Gap</a></li>
    <li>Trail Conditions</li>
  </ol>
</nys-breadcrumbs>

Size

Set the size prop to adjust text size. Available sizes:

• md: Default size (16px)
• sm: Smaller text (14px)

<nys-breadcrumbs size="sm">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/government">Government</a></li>
    <li><a href="/government/agencies">Agencies</a></li>
    <li>Parks & Recreation</li>
  </ol>
</nys-breadcrumbs>

Background Bar

Add the backgroundBar prop to display breadcrumbs on a light gray background bar.

<nys-breadcrumbs backgroundBar>
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/tickets">Ticket System</a></li>
    <li>Del Water Gap</li>
  </ol>
</nys-breadcrumbs>

Disabled

Add the disabled prop to disable all links in the breadcrumbs.

<nys-breadcrumbs disabled>
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/tickets">Ticket System</a></li>
    <li>Del Water Gap</li>
  </ol>
</nys-breadcrumbs>

Usage

When to use this component

• For pages in hierarchies with more than 2 levels. The breadcrumb should be displayed starting at the level 2 page and persist on all child pages in the hierarchy. For example, if a level 2 page has child pages, all pages starting at that level 2 page would need a breadcrumb.
• Users may land on a page from search or external links and need context.
• Users may want to go back to a broader category or section.

When to consider something else

• Top-level pages (e.g., homepage).
• Pages with only one or two levels and no deeper hierarchy.
• Linear flows (e.g., multi-step forms or processes), use a stepper instead.
• When breadcrumbs do not add meaningful context or navigation value.

Properties

Style Overrides

Events

The <nys-breadcrumbs> component emits one custom Javascript event:

1. nys-expand – Fired when the button is clicked.

You can listen to these events using JavaScript:

// Select the breadcrumbs component
const breadcrumbs = document.querySelector('nys-breadcrumbs');
// Listen for the 'nys-expand' event
breadcrumbs.addEventListener("nys-expand", () => {
	console.log("Breadcrumbs expanded");
});