Breadcrumbs

A navigation component that displays a linear path of links showing the user's current location in a hierarchy.

With Icon

With Separator

Sizes

Use the breadcrumbs-{size} class to control the component size.

Size values can include:smmd.

For more information on all available sizing utilities, visit Tailwind

Palette

Use the text-{color} class to control the component color. Refer to the Colors documentation to see all available color and shade options.

For more information on all available color utilities, visit Tailwind .

Customizing

globals.css


:root {
  --ex-breadcrumbs-font-family: var(--font-sans);
  --ex-breadcrumbs-font-weight: var(--font-weight-regular);
 
  --ex-breadcrumbs-font-size-sm: var(--text-xs);
  --ex-breadcrumbs-font-size-md: var(--text-sm);
 
  --ex-breadcrumbs-gap-x-sm: calc(var(--spacing) * 0.25);
  --ex-breadcrumbs-gap-x-md: calc(var(--spacing) * 0.5);
 
  --ex-breadcrumbs-link-gap-x-sm: calc(var(--spacing) * 1.5);
  --ex-breadcrumbs-link-gap-x-md: calc(var(--spacing) * 2);
 
  --ex-breadcrumbs-separator-opacity: var(--ex-options-opacity-subtle);
 
  --ex-breadcrumbs-current-link-font-weight: var(--font-weight-medium);
}

API

Breadcrumbs

Element	Selector
`Breadcrumbs`	`.ex-breadcrumbs`

Prop	Type	Default
`as`	`ElementType`	`nav`
`asChild`	`boolean`	`false`

Breadcrumbs List

Element	Selector
`Breadcrumbs.List`	`.ex-breadcrumbs-list`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Breadcrumbs Item

Element	Selector
`Breadcrumbs.Item`	`.ex-breadcrumbs-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Breadcrumbs Link

Element	Selector
`Breadcrumbs.Link`	`.ex-breadcrumbs-link`

Prop	Type	Default
`as`	`ElementType`	`a`
`asChild`	`boolean`	`false`

Breadcrumbs Current Link

Element	Selector
`Breadcrumbs.CurrentLink`	`.ex-breadcrumbs-current-link`

Prop	Type	Default
`as`	`ElementType`	`a`
`asChild`	`boolean`	`false`

Breadcrumbs Separator

Element	Selector
`Breadcrumbs.Separator`	`.ex-breadcrumbs-separator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`