---
id: breadcrumbs
title: Breadcrumbs
---

# Breadcrumbs

This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.

The Breadcrumbs component lets users show and hide sections of related content on a page.

## How to use

<code src="@digigov/ui/src/navigation/Breadcrumbs/__stories__/Default.tsx" />

### Without current page

<code src="@digigov/ui/src/navigation/Breadcrumbs/__stories__/WithoutCurrentPage.tsx" />

### With hook

<code src="@digigov/ui/src/navigation/Breadcrumbs/__stories__/WithHook.tsx" />

## Accessibility

You can read more about the accessibility patterns used in our Breadcrumbs
implementation in the ARIA Authoring Practices Guide (APG) at [Breadcrumbs](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) section.

## API

See below for a complete reference to all of the props  available to the components mentioned here.

<ComponentProps componentName={[
  "Breadcrumbs",
  "BreadcrumbsList",
  "BreadcrumbsListItem"]} />