Breadcrumb

Visual Hierarchy

Breadcrumbs are secondary navigation and should not compete with the primary nav. Place them at the top of the page content area, below the header but above the page title. Keep text size small (text-sm) and use text-muted-foreground for ancestor links so the current page stands out in text-foreground.

Spacing & Layout

The default gap-1.5 (mobile) and sm:gap-2.5 (desktop) provide comfortable spacing between items. Avoid adding extra margin or padding around the breadcrumb container; it should sit flush with the content below. When paths are very long, the component wraps naturally thanks to flex-wrap.

Responsive Behavior

On mobile screens, collapse intermediate levels using BreadcrumbEllipsis to keep the breadcrumb on a single line. Show only the root, an ellipsis, the parent, and the current page. On wider screens, reveal the full hierarchy. Consider hiding breadcrumbs entirely on very small screens where the sidebar already shows hierarchy.

Color & Contrast

Ancestor links use text-muted-foreground with a hover:text-foreground transition for interactive feedback. The current page uses text-foreground to clearly distinguish it from clickable ancestors. Separators inherit the muted foreground color so they recede visually. All interactive states meet WCAG 2.1 AA contrast requirements.

Keyboard Navigation

• Tab — Move focus to the next breadcrumb link
• Shift + Tab — Move focus to the previous breadcrumb link
• Enter — Activate the focused link (navigate)
• When a DropdownMenu is used, Space or Enter opens the menu
• Escape — Close an open dropdown menu

Screen Reader Support

• The root renders a <nav> element with aria-label="breadcrumb"
• Items use an ordered list (<ol>) so screen readers announce the count and position
• The current page is marked with aria-current="page"
• BreadcrumbEllipsis includes a visually hidden "More" label for screen readers

Semantic Structure

Separators are rendered with role="presentation" and aria-hidden="true" so they are invisible to assistive technology. The ellipsis uses the same pattern. This ensures screen readers announce only the meaningful links and current page, not decorative elements.

Focus Management

Links receive a visible focus ring via focus-visible styles. The current page (BreadcrumbPage) has aria-disabled="true" and is not focusable, preventing users from tabbing to a non-interactive element.

ARIA Attributes

{/* Breadcrumb uses a semantic <nav> with aria-label */}
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    {/* Current page is marked with aria-current="page" */}
    <BreadcrumbItem>
      <BreadcrumbPage>Settings</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

{/* Separators are decorative and hidden from screen readers */}
<BreadcrumbSeparator />
{/* Renders: <li role="presentation" aria-hidden="true"> */}

{/* Ellipsis is also hidden from assistive technology */}
<BreadcrumbEllipsis />
{/* Renders: <span role="presentation" aria-hidden="true">
     with <span className="sr-only">More</span> */}