Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Usage

import { Breadcrumb } from "@smartacteam/ui/breadcrumb";

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

Default

Custom Separator

Use a custom component as children for <Breadcrumb.Separator /> to create a custom separator.

You can compose <Breadcrumb.Item /> and <Breadcrumb.Button /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.

Collapsed

We provide a <Breadcrumb.Ellipsis /> component to show a collapsed state when the breadcrumb is too long.