Hex UIv1

Breadcrumb

A path trail showing the user's location within a hierarchy, with links back to ancestors and a non-interactive current page.

Standard

Truncated (ellipsis)

Custom separator

Installation

pnpm
pnpm dlx @hex-core/cli add breadcrumb

With ellipsis collapse

Replace deep mid-trail entries with BreadcrumbEllipsis when the path would otherwise wrap on narrow viewports. BreadcrumbEllipsis ships an sr-only "More pages" label so AT users can tell something is hidden.

tsx
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/settings/profile">Profile</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Edit</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

With dropdown for siblings

Swap a static segment for a DropdownMenu when users need to jump laterally between sibling sections (common in admin shells). The trigger keeps the chevron caret affordance and matches surrounding link sizing.

tsx
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <DropdownMenu>
        <DropdownMenuTrigger className="flex items-center gap-1 text-muted-foreground transition-colors hover:text-foreground">
          Settings
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="h-3.5 w-3.5"
            aria-hidden="true"
          >
            <path d="m6 9 6 6 6-6" />
          </svg>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start">
          <DropdownMenuItem asChild>
            <a href="/settings/billing">Billing</a>
          </DropdownMenuItem>
          <DropdownMenuItem asChild>
            <a href="/settings/team">Team</a>
          </DropdownMenuItem>
          <DropdownMenuItem asChild>
            <a href="/settings/integrations">Integrations</a>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Account</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API Reference

PropTypeDefaultDescription
className
string—Additional CSS classes on the nav element

AI Guidance

When to use

Use to show location within a hierarchical site or app: docs pages, product categories, nested settings. Include the current page as a non-link BreadcrumbPage.

When not to use

Don't use for primary navigation (use NavigationMenu). Don't use for flat sites without hierarchy. Don't use when the hierarchy is too deep to display — truncate with BreadcrumbEllipsis.

Common mistakes

  • Making the current page a link (use BreadcrumbPage)
  • Showing just one item (defeats the purpose)
  • Using plain text separators without aria-hidden

Accessibility

Root <nav aria-label='breadcrumb'> creates a landmark. BreadcrumbPage has aria-current='page'. Separators are aria-hidden (decorative). BreadcrumbEllipsis is decorative (SVG aria-hidden) with a sr-only 'More pages' label.

Related components

Token budget: 400

Verified against @hex-core/components@1.12.0

Edit this page on GitHub