Ravox KitNavigation
Breadcrumb
Breadcrumb: shows where the person is and the way back. Separator of your choice, the current level with aria-current and, when the trail is long, the middle levels collapse into a … that opens the list of hidden ones.
Settings
Toggles
Examples
With Next's Link
Long trail: the middle becomes …
Home with an icon
At the top of the page
Pedido #4821
Marina Duarte · R$ 312,40 · pago no Pix
Installation
The command creates components/ui/breadcrumb.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add breadcrumbProps
| Prop | Type | Default | Description |
|---|---|---|---|
| separator | ReactNode | setinha | What goes between levels ("/", a dot, an icon). Hidden from screen readers (Breadcrumb). |
| maxItems | number | — | With more levels than this, the middle ones go inside the …; the first and the last ones stay (Breadcrumb). |
| label | string | "Breadcrumb" | Name of the <nav> for screen readers (Breadcrumb). |
| current | boolean | false | The level the person is on: becomes text with aria-current="page" (BreadcrumbItem). |
| asChild | boolean | false | Passes the styling to the child, such as Next's <Link> (BreadcrumbItem). |
| ...props | ComponentProps<"a"> | — | href and the rest of the <a> (BreadcrumbItem). |