Components / Navigation

Breadcrumb

A native breadcrumb navigation composition with real links and a current page.

Preview

Use cases

Nested pages

Show where a project settings page sits in the site hierarchy.

Deep records

Give readers a direct route back from a record to its collection.

Usage example

Vue

<script setup lang="ts">
import Breadcrumb from './components/ui/breadcrumb/Breadcrumb.vue'
import BreadcrumbItem from './components/ui/breadcrumb/BreadcrumbItem.vue'
import BreadcrumbLink from './components/ui/breadcrumb/BreadcrumbLink.vue'
import BreadcrumbList from './components/ui/breadcrumb/BreadcrumbList.vue'
import BreadcrumbPage from './components/ui/breadcrumb/BreadcrumbPage.vue'
import BreadcrumbSeparator from './components/ui/breadcrumb/BreadcrumbSeparator.vue'
</script>

<template>
  <Breadcrumb label="Breadcrumb">
    <BreadcrumbList>
      <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem><BreadcrumbPage>Settings</BreadcrumbPage></BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</template>

More examples

Settings hierarchy

Use real anchors for ancestors and a current-page element at the end.

Settings hierarchy

<script setup lang="ts">
import Breadcrumb from './components/ui/breadcrumb/Breadcrumb.vue'
import BreadcrumbItem from './components/ui/breadcrumb/BreadcrumbItem.vue'
import BreadcrumbLink from './components/ui/breadcrumb/BreadcrumbLink.vue'
import BreadcrumbList from './components/ui/breadcrumb/BreadcrumbList.vue'
import BreadcrumbPage from './components/ui/breadcrumb/BreadcrumbPage.vue'
import BreadcrumbSeparator from './components/ui/breadcrumb/BreadcrumbSeparator.vue'
</script>

<template>
  <Breadcrumb label="Breadcrumb"><BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="/settings">Settings</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Security</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList></Breadcrumb>
</template>

Project record

A short trail is enough when the page has only one ancestor.

Project record

<script setup lang="ts">
import Breadcrumb from './components/ui/breadcrumb/Breadcrumb.vue'
import BreadcrumbItem from './components/ui/breadcrumb/BreadcrumbItem.vue'
import BreadcrumbLink from './components/ui/breadcrumb/BreadcrumbLink.vue'
import BreadcrumbList from './components/ui/breadcrumb/BreadcrumbList.vue'
import BreadcrumbPage from './components/ui/breadcrumb/BreadcrumbPage.vue'
import BreadcrumbSeparator from './components/ui/breadcrumb/BreadcrumbSeparator.vue'
</script>

<template>
  <Breadcrumb label="Project location"><BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/projects">Projects</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Atlas</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList></Breadcrumb>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Breadcrumb
Name	Type	Default or requirement
`label`	string	required
`BreadcrumbLink href`	string	required
`BreadcrumbSeparator default`	visual slot	built-in separator

Breadcrumb renders a labelled nav containing an ordered list. BreadcrumbPage adds aria-current="page"; separators are presentation-only, and the current page should only be a link when it genuinely navigates.

Implementation notes

Show the actual page hierarchy, not a history of recently visited pages.
The final item normally names the current page and does not need a link.

Accessibility and localization

The root renders labelled navigation and the page item marks aria-current="page".