Breadcrumbs

A real <nav aria-label="Breadcrumb"> wrapping a real <ol>, an ordered trail is exactly what an ordered list is for. The current page is marked aria-current="page" on plain text, not a link, you don't link to where you already are.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Unstyled

Same component — Kernel look stripped. See Platforms.

home label

home href

settings label

settings href

current page

Usage

<Breadcrumbs>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/settings">Settings</BreadcrumbItem>
  <BreadcrumbItem current>Profile</BreadcrumbItem>
</Breadcrumbs>

<kernel-breadcrumbs>
  <kernel-breadcrumb-item href="/">Home</kernel-breadcrumb-item>
  <kernel-breadcrumb-item href="/settings">Settings</kernel-breadcrumb-item>
  <kernel-breadcrumb-item current>Profile</kernel-breadcrumb-item>
</kernel-breadcrumbs>

Props

Props for Breadcrumbs.
Component	Prop	Type
`BreadcrumbItem`	`current`	boolean
`BreadcrumbItem`	`href`	string