Breadcrumb

<nav aria-label="Breadcrumb">

Shows the current page location within the site hierarchy. Helps users navigate back to parent sections.

Overview

Preview

1. Home
2. Components
3. Breadcrumb

1. Home/
2. Components/
3. Breadcrumb

2. Components
3. Breadcrumb

1. Home
2. Components
3. Breadcrumb

With chevron separator

Preview

1. Home
2. Components
3. Breadcrumb

<nav aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center gap-1.5 text-sm">
    <li class="flex items-center gap-1.5">
      <a href="/" class="text-zinc-500 hover:text-zinc-300 transition-colors">Home</a>
      <svg class="h-3.5 w-3.5 text-zinc-700" ...>▶</svg>
    </li>
    <li class="flex items-center gap-1.5">
      <a href="/components" class="text-zinc-500 hover:text-zinc-300 transition-colors">Components</a>
      <svg class="h-3.5 w-3.5 text-zinc-700" ...>▶</svg>
    </li>
    <li>
      <span class="font-medium text-zinc-200" aria-current="page">Breadcrumb</span>
    </li>
  </ol>
</nav>

With slash separator

<nav aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center gap-1.5 text-sm">
    <li class="flex items-center gap-1.5">
      <a href="/" class="text-zinc-500 hover:text-zinc-300 transition-colors">Home</a>
      <span class="text-zinc-700" aria-hidden="true">/</span>
    </li>
    <li class="flex items-center gap-1.5">
      <a href="/components" class="text-zinc-500 hover:text-zinc-300 transition-colors">Components</a>
      <span class="text-zinc-700" aria-hidden="true">/</span>
    </li>
    <li>
      <span class="font-medium text-zinc-200" aria-current="page">Breadcrumb</span>
    </li>
  </ol>
</nav>

With home icon

<nav aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center gap-1.5 text-sm">
    <li class="flex items-center gap-1.5">
      <a href="/" class="text-zinc-500 hover:text-zinc-300 transition-colors" aria-label="Home">
        <svg class="h-3.5 w-3.5" ...>home icon</svg>
      </a>
      <svg class="h-3.5 w-3.5 text-zinc-700" ...>chevron</svg>
    </li>
    <!-- rest of crumbs -->
  </ol>
</nav>

Badge style

Preview

1. Home
2. Components
3. Breadcrumb

<li>
  <a href="/" class="rounded-md px-2 py-0.5 text-xs text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300 transition-colors">
    Home
  </a>
</li>
<!-- Current page -->
<li>
  <span class="rounded-md bg-zinc-800 px-2 py-0.5 text-xs font-medium text-zinc-200" aria-current="page">
    Breadcrumb
  </span>
</li>

Dynamic (Nuxt)

<script setup>
const route = useRoute()
const crumbs = computed(() => {
  const parts = route.path.split('/').filter(Boolean)
  return parts.map((part, i) => ({
    label: part.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase()),
    path: '/' + parts.slice(0, i + 1).join('/'),
  }))
})
</script>

<template>
  <nav aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center gap-1.5 text-sm">
      <li class="flex items-center gap-1.5">
        <NuxtLink to="/" class="text-zinc-500 hover:text-zinc-300 transition-colors">Home</NuxtLink>
        <svg class="h-3.5 w-3.5 text-zinc-700" ...>▶</svg>
      </li>
      <li v-for="(crumb, i) in crumbs" :key="crumb.path" class="flex items-center gap-1.5">
        <NuxtLink v-if="i < crumbs.length - 1"
          :to="crumb.path" class="text-zinc-500 hover:text-zinc-300 transition-colors">
          {{ crumb.label }}
        </NuxtLink>
        <span v-else class="font-medium text-zinc-200" aria-current="page">{{ crumb.label }}</span>
        <svg v-if="i < crumbs.length - 1" class="h-3.5 w-3.5 text-zinc-700" ...>▶</svg>
      </li>
    </ol>
  </nav>
</template>

Accessibility notes

• Wrap in <nav aria-label="Breadcrumb"> to distinguish from other navs on the page
• Use <ol> (ordered list) — the order of breadcrumbs is meaningful
• Mark the current page with aria-current="page" on its element
• Separator characters should have aria-hidden="true" so screen readers skip them