fetaUI
GitHub

Breadcrumb

Shows where the current page sits and lets people step back up.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/breadcrumb
Playground
Plain
Tray
Collapsed
Loading
Small
Separators
Slash and dot
Style
Size
Separator
Icons animation
Loading
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/breadcrumb

Plain

Sits in the page, with the current page as plain text.

Size
Separator

Tray

Lifts the path onto a tray, and the current page becomes a chip.

Size
Separator

Accessibility

  • A nav labelled Breadcrumb around an ordered list.
  • The current page has aria-current page.
  • Separators are decorative and hidden from screen readers.

Motion

  • A new level slides in 8 px over 200 ms.
  • Going up, removed crumbs fade and slide out in 150 ms.
  • In Tray, the current chip glides to its spot.
  • The fold menu grows from its button.
  • While loading, a skeleton holds the place of the current page.
  • With reduced motion, the chip jumps and the skeleton stays still.

Responsive behavior

  • 28 and 36 px on Web, 36 and 44 px on Mobile.
  • Mobile keeps Home, the parent and the current page. Home with an icon shows the icon alone.
  • Paths too wide for their container fold, whatever the count.

Performance

  • One ResizeObserver decides folding by real width and remembers the width it needed, so it does not flicker at the edge.
  • The hidden levels menu mounts only when the path folds.
  • Crumbs animate opacity and x, and the current chip is one shared layout element.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import Breadcrumb from @/components/fetaui/breadcrumb after installing it. BreadcrumbSeparator is exported too.
  • items runs from the root to the current page, and the last item never links. An icon makes a crumb icon only, with label as its name.
  • maxItems defaults to 4, and Mobile caps it at 3. A path too wide for its space folds too.
  • Crumbs are plain anchors, so use onClick for client routing. The Go up and Go deeper buttons are demo only. Composes DropdownMenu, IconButton and Skeleton.
/docs/components/breadcrumb/markdown
PreviousDropdown
NextPagination

Related

TabsComponentSwitch between views of the same thing. Panels swipe with the finger and the indicator follows.PaginationComponentSeven ways to move through pages. The current page lifts onto surface and slides to where you clicked.Navigation MenuComponentA tray pill of triggers with soft panels that morph as you move across them.SidebarComponentNav Items on a tray, with the active page lifted onto surface. Collapses to an icon rail.Dropdown MenuComponentA list of actions behind a button, with shortcuts, toggles, submenus and a red destructive action at the end.