James Shopland

Breadcrumbs [react-aria-components]

Navigation 2

About

Breadcrumbs display a hierarchy of links to the current page or resource in an application. Breadcrumbs provide a list of links to parent pages of the current page in hierarchical order. Breadcrumbs helps implement these in an accessible way.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Breadcrumbs [react-aria-components] to your project and fits it to your theme.

Code

How Breadcrumbs [react-aria-components] is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  Breadcrumbs,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumbs"

function BreadcrumbsDemo() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem>
        <BreadcrumbLink href="/home">Home</BreadcrumbLink>
        <BreadcrumbSeparator />
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
        <BreadcrumbSeparator />
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbPage>Breadcrumbs</BreadcrumbPage>
      </BreadcrumbItem>
    </Breadcrumbs>
  )
}

export { BreadcrumbsDemo }

Dependencies

More by James Shopland

View all
  • Tag Group [react-aria-components]

    Tag Group [react-aria-components]

    96
  • Date Range Picker [react-aria-components]

    Date Range Picker [react-aria-components]

    88
  • Grid List [react-aria-components]

    Grid List [react-aria-components]

    74
  • Switch [react-aria-components]

    Switch [react-aria-components]

    70
  • Select [react-aria-components]

    Select [react-aria-components]

    47
  • Range Calendar [react-aria-components]

    Range Calendar [react-aria-components]

    39
  • Menu

    Menu

    36
  • Popover

    Popover

    35

More in Navigation

View all
  • Sidebar

    Sidebar

    365
  • Pagination

    Pagination

    38
  • Navbar

    Navbar

    8
  • Sortable Sidebar Navigation

    Sortable Sidebar Navigation

    76
  • Pagination

    Pagination

    105
  • Oversized 404 Numeral

    Oversized 404 Numeral

    72
  • Tabs like bookmark

    Tabs like bookmark

    76
  • Footer

    Footer

    86