Components

Breadcrumb

Compact trail for deep nav. Use when the user could be more than one click from home.

When to useto signal position in a deep hierarchy and give the operator a quick way back.

Import

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage,
  BreadcrumbEllipsis,
} from "@ravnhq/efni/breadcrumb"

Three levels

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/missions">Missions</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/missions/in-flight">In flight</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>MB-4472</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

With ellipsis (collapsed)

<BreadcrumbItem>
  <BreadcrumbEllipsis />
</BreadcrumbItem>

Props

Prop	Type	Default	Description
`…props`	`React.ComponentProps<"nav">`	—	Everything Breadcrumb passes to the element it renders.
`BreadcrumbLink href`	`string`	—	Destination URL. Renders as a native anchor.
`BreadcrumbPage`	`children`	—	The current location. Rendered as a non-link with aria-current="page".
`BreadcrumbSeparator`	`children`	—	Separator element. Defaults to a chevron; override with any node.