RadCN
Navigationreadycomponentready

Breadcrumb

A native breadcrumb navigation primitive with linked ancestors, current-page semantics, separators, ellipsis, and composed menu or drawer branches.

Importimport { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from 'radcn/breadcrumb'
Preview

Live package example

Render Link, Ellipsis, Separator, Demo, Dropdown, and Responsive breadcrumb examples with native links and composed RadCN primitives.

Example Parity

Render Link, Ellipsis, Separator, Demo, Dropdown, and Responsive breadcrumb examples with native links and composed RadCN primitives.

Preview
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from 'radcn/breadcrumb'
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from 'radcn/drawer'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger } from 'radcn/dropdown-menu'

function SlashGlyph() {
  return <span aria-hidden="true" class="radcn-breadcrumb-glyph inline-flex w-4 h-4 items-center justify-center text-current text-[0.875rem] leading-none">/</span>
}

function ChevronGlyph() {
  return <span aria-hidden="true" class="radcn-breadcrumb-glyph inline-flex w-4 h-4 items-center justify-center text-current text-[0.875rem] leading-none">⌄</span>
}

export function BreadcrumbPreview() {
  return (
    <div class="breadcrumb-preview">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem><BreadcrumbLink href="/components">Components</BreadcrumbLink></BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>

      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem><BreadcrumbLink href="/docs/components">Components</BreadcrumbLink></BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>

      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
          <BreadcrumbSeparator><SlashGlyph /></BreadcrumbSeparator>
          <BreadcrumbItem>
            <DropdownMenu>
              <DropdownMenuTrigger class="radcn-breadcrumb-trigger">Components<ChevronGlyph /></DropdownMenuTrigger>
              <DropdownMenuPortal>
                <DropdownMenuContent align="start">
                  <DropdownMenuItem>Documentation</DropdownMenuItem>
                  <DropdownMenuItem>Themes</DropdownMenuItem>
                  <DropdownMenuItem>GitHub</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenuPortal>
            </DropdownMenu>
          </BreadcrumbItem>
          <BreadcrumbSeparator><SlashGlyph /></BreadcrumbSeparator>
          <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>

      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <span class="radcn-breadcrumb-responsive-desktop">
              <DropdownMenu>
                <DropdownMenuTrigger ariaLabel="Toggle menu" class="radcn-breadcrumb-trigger"><BreadcrumbEllipsis /></DropdownMenuTrigger>
                <DropdownMenuPortal>
                  <DropdownMenuContent align="start">
                    <DropdownMenuItem>Documentation</DropdownMenuItem>
                    <DropdownMenuItem>Build Your Application</DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenuPortal>
              </DropdownMenu>
            </span>
            <span class="radcn-breadcrumb-responsive-mobile">
              <Drawer>
                <DrawerTrigger ariaLabel="Toggle Menu" class="radcn-breadcrumb-trigger"><BreadcrumbEllipsis /></DrawerTrigger>
                <DrawerPortal>
                  <DrawerOverlay />
                  <DrawerContent>
                    <DrawerHeader>
                      <DrawerTitle>Navigate to</DrawerTitle>
                      <DrawerDescription>Select a page to navigate to.</DrawerDescription>
                    </DrawerHeader>
                    <div class="radcn-breadcrumb-drawer-links">
                      <a class="radcn-breadcrumb-link" href="#">Documentation</a>
                      <a class="radcn-breadcrumb-link" href="#">Build Your Application</a>
                    </div>
                    <DrawerFooter>
                      <DrawerClose class="radcn-button radcn-button--outline radcn-button--default">Close</DrawerClose>
                    </DrawerFooter>
                  </DrawerContent>
                </DrawerPortal>
              </Drawer>
            </span>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem><BreadcrumbLink class="radcn-breadcrumb-truncate" href="#">Data Fetching</BreadcrumbLink><BreadcrumbSeparator /></BreadcrumbItem>
          <BreadcrumbItem><BreadcrumbPage class="radcn-breadcrumb-truncate">Caching and Revalidating</BreadcrumbPage></BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from 'radcn/breadcrumb'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Breadcrumb renders a native nav with aria-label="breadcrumb" and an ordered list of items.
  • BreadcrumbLink renders native anchors with href, so Next Link and shadcn asChild examples map to platform link semantics.
  • BreadcrumbPage renders aria-current="page" with role="link" and aria-disabled="true" for the current location.
  • BreadcrumbEllipsis includes hidden More text, while dropdown and drawer triggers use accessible names such as Toggle menu.
  • DropdownMenu, Drawer, and Button-style close actions keep their own roles, labels, focus behavior, and enhancement boundaries when composed inside Breadcrumb items.

Customization

  • Breadcrumb parts expose public RadCN classes and data hooks for nav, list, item, link, page, separator, and ellipsis parts.
  • The default separator is a chevron-style glyph; author-supplied children can render Slash-style separators or any app-owned icon.
  • Use radcn-breadcrumb-trigger, radcn-breadcrumb-glyph, radcn-breadcrumb-truncate, and responsive branch classes for example-style compositions.
  • Truncation, max-width, gap, icon size, and responsive visibility map to classes, inline styles, or CSS variables instead of Tailwind utilities.

Remix 3 Notes

  • Next Link and shadcn asChild map to explicit BreadcrumbLink href or app-owned anchor composition without Radix Slot.
  • React useState and useMediaQuery map to Remix 3 browser enhancement, CSS breakpoints, or app-owned state.
  • Lucide ChevronRight, MoreHorizontal, SlashIcon, and ChevronDownIcon are presentation choices; examples use package/app-owned glyphs instead of icon package dependencies.
  • Breadcrumb does not own DropdownMenu, Drawer, Button, routing, viewport state, or icon assets. It remains a navigation primitive that composes with those parts.