AeontelAeontel Docs

Breadcrumb

Navigation trail primitive with ellipsis + separators.

Usage

TSX
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@aeontel/ui";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Agents</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;

Exports

Breadcrumb

Breadcrumb navigation root.

TypeScript
Breadcrumb(props: React.ComponentProps<"nav">): JSX.Element

BreadcrumbList

Ordered list of breadcrumb items.

TypeScript
BreadcrumbList(props: React.ComponentProps<"ol">): JSX.Element

BreadcrumbItem

Individual breadcrumb item.

TypeScript
BreadcrumbItem(props: React.ComponentProps<"li">): JSX.Element

BreadcrumbLink

Clickable breadcrumb link.

TypeScript
BreadcrumbLink(props: { as?: T; className?: string } & React.ComponentPropsWithoutRef<T>): JSX.Element

Props

PropTypeDefaultDescription
as?T | undefined—
className?string | undefined—

BreadcrumbPage

Current page (non-link) breadcrumb entry.

TypeScript
BreadcrumbPage(props: React.ComponentProps<"span">): JSX.Element

BreadcrumbSeparator

Separator between breadcrumb items.

TypeScript
BreadcrumbSeparator(props: React.ComponentProps<"li">): JSX.Element

BreadcrumbEllipsis

Ellipsis marker for collapsed breadcrumbs.

TypeScript
BreadcrumbEllipsis(props: React.ComponentProps<"span">): JSX.Element