Breadcrumb

Shows the user's current location within a hierarchy of pages, with links to previous levels

Usage

Use Breadcrumb to display a navigation trail that helps users understand their current location and navigate back through a hierarchy of pages.

import { Breadcrumb } from '@elemnts-ui/react';

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
      <Breadcrumb.Separator />
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.CurrentLink>Current Page</Breadcrumb.CurrentLink>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

Collapsed

Use Breadcrumb.Ellipsis to hide intermediate items when the breadcrumb trail is long.

Custom Separator

Replace the default chevron separator by passing children to Breadcrumb.Separator.

API Reference

BreadcrumbRoot

The root component

Prop	Type	Default
as	`React.ElementType`	`-`
asChild	`boolean`	`false`

BreadcrumbList

Renders the list of breadcrumb items.

Prop	Type	Default
as	`React.ElementType`	`-`
asChild	`boolean`	`false`

BreadcrumbItem

Renders a single breadcrumb item.

Prop	Type	Default
as	`React.ElementType`	`-`
asChild	`boolean`	`false`

BreadcrumbLink

Renders a link item in the breadcrumb.

Prop	Type	Default
as	`React.ElementType`	`-`
href	`string`	-
asChild	`boolean`	`false`

BreadcrumbCurrentLink

Renders the current link item in the breadcrumb.

Prop	Type	Default
as	`React.ElementType`	`-`
asChild	`boolean`	`false`

BreadcrumbSeparator

Renders the separator between breadcrumb items.

Prop	Type	Default
as	`React.ElementType`	`-`
children	`React.ReactNode`	`Icon`
asChild	`boolean`	`false`

BreadcrumbEllipsis

Renders the ellipsis item in the breadcrumb.

Prop	Type	Default
as	`React.ElementType`	`-`
asChild	`boolean`	`false`