Breadcrumbs | Boltdocs

The Breadcrumbs component displays a horizontal chain of breadcrumb links indicating the navigation structure of the current active page.

It's a thin wrapper around react-aria-components' Breadcrumbs, so it inherits proper <nav> semantics, keyboard navigation (Tab moves between crumbs), and screen-reader friendliness for free. Boltdocs fills in the route hierarchy from useBreadcrumbs() — you just compose the visual treatment.

Import

import { Breadcrumbs } from 'boltdocs/primitives'

Composable Breadcrumbs Example

Using the primitive Breadcrumbs sub-components, you can design a custom breadcrumbs indicator. The example below shows how to fetch the path segments via useBreadcrumbs and render them with custom icons and separators:

// docs/components/CustomBreadcrumbs.tsx
import React from 'react'
import { Breadcrumbs } from 'boltdocs/primitives'
import { useBreadcrumbs } from 'boltdocs/client'
import { Home } from 'lucide-react'

export default function CustomBreadcrumbs() {
  const { crumbs, activeRoute } = useBreadcrumbs()

  if (crumbs.length === 0) return null

  return (
    <Breadcrumbs.Root className="flex items-center gap-2 text-sm font-medium">
      
      {/* 1. Home Base Node */}
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="/" className="text-muted hover:text-body transition-colors flex items-center">
          <Home size={14} />
        </Breadcrumbs.Link>
      </Breadcrumbs.Item>

      {/* 2. Sibling Nodes */}
      {crumbs.map((crumb, idx) => {
        const isActive = crumb.href === activeRoute?.path

        return (
          <Breadcrumbs.Item key={`${crumb.href}-${idx}`} className="gap-2">
            <Breadcrumbs.Separator className="text-muted/40" />
            <Breadcrumbs.Link
              href={crumb.href}
              className={isActive
                ? 'text-body font-semibold cursor-default pointer-events-none'
                : 'text-muted hover:text-body transition-colors'
              }
            >
              {crumb.label}
            </Breadcrumbs.Link>
          </Breadcrumbs.Item>
        )
      })}
    </Breadcrumbs.Root>
  )
}

Composable Sub-Components

The Breadcrumbs primitive provides the following sub-components for structure customization:

Component	HTML Tag	Description	Props
`Breadcrumbs.Root` / `Breadcrumbs`	`<nav>`	The main wrapping inline nav container shell.	`ComponentBaseProps`
`Breadcrumbs.Item`	`<li>`	The individual breadcrumb cell container.	`ComponentBaseProps`
`Breadcrumbs.Link`	`<a>`	An optimized anchor element linking to a parent routing category.	`Breadcrumbs.Link Props`
`Breadcrumbs.Separator`	`<span>`	Renders a directional separation icon (defaults to Chevron Right icon).	`ComponentBaseProps`

Component Props

ComponentBaseProps (Common)

Property	Type	Default	Description
`children`	`ReactNode`	`undefined`	Children content elements.
`className`	`string`	`undefined`	Custom CSS utility classes.
`style`	`CSSProperties`	`undefined`	Inline styling overrides.

`Breadcrumbs.Link` Props

Property	Type	Default	Description
`href`	`string`	Required	Navigation route destination path.
`className`	`string`	`undefined`	CSS class style override.

Last updated on July 27, 2026

ImportLink

Composable Breadcrumbs ExampleLink

Composable Sub-ComponentsLink

Component PropsLink

ComponentBaseProps (Common)Link