nessra uinessra ui

Breadcrumb

Previous: BadgeNext: Button

Displays the path to the current resource using a hierarchy of links.

Loading...
import {
  Breadcrumb,
  BreadcrumbItem,

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/breadcrumb.json

Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API Reference

Breadcrumb

ComponentDescription
BreadcrumbThe root component
BreadcrumbListContainer for breadcrumb items
BreadcrumbItemA single breadcrumb item
BreadcrumbLinkA link within a breadcrumb item
BreadcrumbPageThe current page (not a link)
BreadcrumbSeparatorSeparator between items
BreadcrumbEllipsisEllipsis for collapsed items

BreadcrumbLink Props

PropTypeDefaultDescription
hrefstring-The URL the link points to
asChildbooleanfalseRender as child component
BadgeButton

On this page

InstallationUsageAPI ReferenceBreadcrumbBreadcrumbLink Props