Breadcrumb - EnterUI

Navigation OverlaysUpdated 6 May 2026

Breadcrumb defines how EnterUI handles semantic page hierarchy navigation, including default structure, accessible states, and token-driven styling.

#Default usage

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/docs">Docs</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
    <BreadcrumbItem><BreadcrumbLink href="/docs/components/button">Components</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
    <BreadcrumbItem><BreadcrumbPage>Button</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

#Import

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@froggdesign/enter-ui-react";

#Accessibility

Breadcrumb renders a nav landmark with aria-label="Breadcrumb". BreadcrumbPage sets aria-current="page".

#API

Compose list, item, link, separator, and page primitives.
BreadcrumbSeparator defaults to / and is hidden from assistive technology.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.