Breadcrumb

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

Preview ​

Installation ​

bash
npx sigma-ui add breadcrumb

Examples ​

Custom separator ​

Use a custom component as slot for <BreadcrumbSeparator /> to create a custom separator.

Dynamic rendering ​

Example of rendering items dynamically.

Dynamic rendering with ellipsis ​

Example of rendering items dynamically with ellipsis.

You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.

Collapsed ​

Use <BreadcrumbEllipsis /> component to show collapsed state when the breadcrumb is too long.

To use a custom link component from your routing library, you can use the asChild prop on <BreadcrumbLink /> - this will flatten the components and prevent creating a link inside of a link.

Responsive ​

Here's an example of a responsive breadcrumb that composes <BreadcrumbItem /> with <BreadcrumbEllipsis />, <DropdownMenu />, and <Drawer />.

It displays a dropdown on desktop and a drawer on mobile.

Alternative way of using the breadcrumb component. Provides less customization but easier to use.

For this example to work, make sure to specify route url: and route name: values that are actually defined in your router.

Custom template

Router

Edit this page on GitHub