Morpha UI
ComponentsNavigation

Breadcrumb

Show the user's location within the site hierarchy.

Overview

A breadcrumb shows the user's location within the site hierarchy and offers a path back up. Compose it from BreadcrumbList, BreadcrumbItem, BreadcrumbLink, and BreadcrumbPage.

$ npx morpha-ui add breadcrumb

Examples

Collapsed

Installation

Morpha UI components are distributed via the Morpha CLI (coming in a later step): npx morpha-ui add breadcrumb. In the meantime, since this is the base shadcn component, you can also add it directly:

npx shadcn@latest add breadcrumb

API Reference

The Breadcrumb root renders a labelled <nav>. The parts — BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, and BreadcrumbEllipsis — build the trail.

Prop

Type

Accessibility

  • The root renders <nav aria-label="breadcrumb">.
  • BreadcrumbPage marks the current page with aria-current="page".
  • Separators and the ellipsis are aria-hidden so they aren't announced.

Tabs

Organize content into switchable panels.

Dialog

A modal overlay for focused tasks.

On this page

OverviewExamplesCollapsedInstallationAPI ReferenceAccessibility