Breadcrumbs

The trail of pages above the current one. Breadcrumbs.Root is a nav landmark around an ordered list, and each Breadcrumbs.Item is a list item. Put a link in each item, such as an a or your router's link, and plain text in the last one, marked current, which wraps that text in a span with aria-current="page".

<Breadcrumbs.Root>
  <Breadcrumbs.Item>
    <YourLink to="/">Home</YourLink>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <YourLink to="/settings">Settings</YourLink>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item current>Billing</Breadcrumbs.Item>
</Breadcrumbs.Root>

Server Components can import it from @tounsoo/todae/breadcrumbs. That entry has no 'use client' and no hooks; the main @tounsoo/todae entry is a client module.

The landmark is named "Breadcrumb" unless you pass a non-empty aria-label or aria-labelledby. That default is the breadcrumbs string of StringsProvider, English unless you set it, and always English from the @tounsoo/todae/breadcrumbs server entry. A separator glyph is drawn between items, / unless you pass separator, and screen readers skip it. The items wrap onto more lines when they do not fit.

When to use

When: A page deep in a hierarchy, where people need to see where they are and move up.

When not: Steps in a flow the user moves through in order → a stepper. Sections of one page → Tabs. The site's main navigation → your own nav.

Props

Breadcrumbs.Root props
Name	Type	Required	Default	Description
aria-label	`string`	no	"Breadcrumb"	Landmark name. Default is the breadcrumbs string from StringsProvider; the server entry always uses English.
aria-labelledby	`string`	no	—	Id of an element that names the landmark. When set, the default name is dropped.
separator	`string`	no	"/"	Text drawn between items. Screen readers skip it.
children	`React.ReactNode`	no	—	Breadcrumbs.Item elements, from the top page down to this one.

Breadcrumbs.Item props
Name	Type	Required	Default	Description
current	`boolean`	no	false	Wraps the text in a span with aria-current="page", marking the page you are on. Give it plain text, not a link.
children	`React.ReactNode`	no	—	A link to the page, such as an a element or your router's link.