Component

Breadcrumb

Navigation breadcrumbs with pill-shaped links and orbit hover effects. Clean, flat styling with subtle interaction feedback.

With Icons

With Ellipsis (Collapsed)

Use ellipsis for long navigation paths to save space.

Application Context

User Settings Path:

File Browser Path:

Alternative Styles

Different visual styles for breadcrumb navigation.

Minimal Style

Individual Pills

Contained Style

Slash Separators

API Reference

Components

Breadcrumb — Root nav container with aria-label
BreadcrumbList — Ordered list wrapper
BreadcrumbItem — List item wrapper
BreadcrumbLink — Clickable navigation link with pill styling
BreadcrumbPage — Current page indicator (non-clickable)
BreadcrumbSeparator — Visual separator between items
BreadcrumbEllipsis — Collapsed items indicator

BreadcrumbLink Props

Prop	Type	Description
href	string	Navigation URL
asChild	boolean	Render as child element (for Next.js Link)