<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/projects">Projects</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Website redesign</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>The last crumb is a Breadcrumb.Page, not a link — it carries aria-current and
is not clickable, because it is where you already are. Breadcrumb.Ellipsis
stands in for collapsed middle levels.
API
Breadcrumb.Root
Plus every <nav> prop. Source: breadcrumb/components/breadcrumb-root.tsx.
Breadcrumb.Ellipsis
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <span> prop. Source: breadcrumb/components/breadcrumb-ellipsis.tsx.
Breadcrumb.Item
Plus every <li> prop. Source: breadcrumb/components/breadcrumb-item.tsx.
Breadcrumb.Link
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <a> prop. Source: breadcrumb/components/breadcrumb-link.tsx.
Breadcrumb.List
Plus every <ol> prop. Source: breadcrumb/components/breadcrumb-list.tsx.
Breadcrumb.Page
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <span> prop. Source: breadcrumb/components/breadcrumb-page.tsx.
Breadcrumb.Separator
Plus every <li> prop. Source: breadcrumb/components/breadcrumb-separator.tsx.