Breadcrumb

Easy hierarchical navigation

Breadcrumb navigation assists users in recognizing their position within a website hierarchy, by offering a trail of breadcrumbs leading back to the homepage.

Anatomy

<Breadcrumb.Root>
  <Breadcrumb.Link to="/" label="Home" />
  <Breadcrumb.Link to="/hello" label="Hello" />
  <Breadcrumb.Link to="/hello/world" label="World" />
</Breadcrumb.Root>

const links = [
  { to: '/', label: 'Home' },
  { to: '/hello', label: 'Hello' },
  { to: '/world', label: 'World' }
] as const;

<Breadcrumb.Root>
  {Breadcrumb.Link.fromList(links)}
</Breadcrumb.Root>

Default

<Breadcrumb>
  <Breadcrumb.Link to="/" label="Home" />
  <Breadcrumb.Link to="/hello" label="Hello" />
  <Breadcrumb.Link to="/hello/world" label="World" />
</Breadcrumb>

Custom separator icon

<Breadcrumb separator={ControlsChevronRightIcon}>
  {Breadcrumb.Link.fromList(links)}
</Breadcrumb>

<Breadcrumb separator={ArrowsChevronRightDoubleIcon}>
  {Breadcrumb.Link.fromList(links)}
</Breadcrumb>