--- title: Breadcrumb (Vanilla) - USWDS + Tailwind description: Use breadcrumbs to show a visitor's location in a website hierarchy and provide links back to higher-level pages. --- # Breadcrumb Use breadcrumbs to show a visitor's location in a website hierarchy and provide links back to higher-level pages. ## Usage Breadcrumbs show the current page’s place in the site structure and let users navigate to its parent pages. ## Examples ### Default ```html ``` ### Wrapping ```html ``` ## Component API * Use a `

` with an `aria-label` to identify the breadcrumb navigation. * Use an ordered list for the path. Parent items are links; the current page is a `` without a link. * Hide the separator and mobile back arrow from assistive technology with `aria-hidden="true"`. * Add the `@mobile-lg:truncate` class to the list for the default single-line display. Omit it to allow wrapping. ## Accessibility * Keep the current page in the breadcrumb trail even though it is not a link. * Ensure separator icons have sufficient contrast against the background.