Components

Breadcrumb

Displays a hierarchy of links to the current page or resource in an application.

Loading

Installation

pnpm dlx shadcn@latest add @toui/breadcrumb

Examples

Icon

Loading

Separator

Loading
Loading

Card

Loading

API Reference

This component provides a customizable breadcrumb system for displaying a hierarchy of links.

This component is a flexible container for displaying breadcrumb items.

PropTypeDefault
className string
separator React.ReactNode<ChevronRight/>

This component is used to display a list of breadcrumb items.

PropTypeDefault
className string

This component is used to display an individual breadcrumb item.

PropTypeDefault
className string

This component is used to display a link within a breadcrumb item.

PropTypeDefault
className string
href string#
asChild booleanfalse

This component is used to display the current page in the breadcrumb.

PropTypeDefault
className string

This component is used to display a separator between breadcrumb items.

PropTypeDefault
className string

This component is used to display an ellipsis in the breadcrumb.

PropTypeDefault
className string

Credits

We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking Accept, you agree to our use of cookies.
Learn more.