Breadcrumb | arctis/ui

Show where the current page sits in the site. Add separators between levels and collapse the middle when the path gets long.

tsx

1import {2  Breadcrumb,3  BreadcrumbItem,4  BreadcrumbLink,5  BreadcrumbList,6  BreadcrumbPage,7  BreadcrumbSeparator,8} from "@/components/ui/breadcrumb"910export function Example() {11  return (12    <Breadcrumb>13      <BreadcrumbList>14        <BreadcrumbItem>15          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>16        </BreadcrumbItem>17        <BreadcrumbSeparator />18        <BreadcrumbItem>19          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>20        </BreadcrumbItem>21        <BreadcrumbSeparator />22        <BreadcrumbItem>23          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>24        </BreadcrumbItem>25      </BreadcrumbList>26    </Breadcrumb>27  )28}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add breadcrumb

Usage

1import {2  Breadcrumb,3  BreadcrumbItem,4  BreadcrumbLink,5  BreadcrumbList,6  BreadcrumbPage,7  BreadcrumbSeparator,8} from "@/components/ui/breadcrumb"

1<Breadcrumb>2  <BreadcrumbList>3    <BreadcrumbItem>4      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>5    </BreadcrumbItem>6    <BreadcrumbSeparator />7    <BreadcrumbItem>8      <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>9    </BreadcrumbItem>10    <BreadcrumbSeparator />11    <BreadcrumbItem>12      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>13    </BreadcrumbItem>14  </BreadcrumbList>15</Breadcrumb>

Composition

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    └── BreadcrumbItem
        └── BreadcrumbPage

BreadcrumbList holds the ordered trail. Each BreadcrumbItem contains either a BreadcrumbLink or the current BreadcrumbPage, with BreadcrumbSeparator between items.

Basic

A root, section, and current page with the default chevron separators.

tsx

1import {2  Breadcrumb,3  BreadcrumbItem,4  BreadcrumbLink,5  BreadcrumbList,6  BreadcrumbPage,7  BreadcrumbSeparator,8} from "@/components/ui/breadcrumb"910export function Example() {11  return (12    <Breadcrumb>13      <BreadcrumbList>14        <BreadcrumbItem>15          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>16        </BreadcrumbItem>17        <BreadcrumbSeparator />18        <BreadcrumbItem>19          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>20        </BreadcrumbItem>21        <BreadcrumbSeparator />22        <BreadcrumbItem>23          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>24        </BreadcrumbItem>25      </BreadcrumbList>26    </Breadcrumb>27  )28}

Custom separator

Pass children to BreadcrumbSeparator to replace the chevron with a slash, dot, or another mark.

tsx

1import {2  Breadcrumb,3  BreadcrumbItem,4  BreadcrumbLink,5  BreadcrumbList,6  BreadcrumbPage,7  BreadcrumbSeparator,8} from "@/components/ui/breadcrumb"910export function Example() {11  return (12    <Breadcrumb>13      <BreadcrumbList>14        <BreadcrumbItem>15          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>16        </BreadcrumbItem>17        <BreadcrumbSeparator>18          <SlashIcon />19        </BreadcrumbSeparator>20        <BreadcrumbItem>21          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>22        </BreadcrumbItem>23        <BreadcrumbSeparator>24          <SlashIcon />25        </BreadcrumbSeparator>26        <BreadcrumbItem>27          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>28        </BreadcrumbItem>29      </BreadcrumbList>30    </Breadcrumb>31  )32}

Collapsed

Replace middle levels with BreadcrumbEllipsis when the full trail is too long.

tsx

1import {2  Breadcrumb,3  BreadcrumbEllipsis,4  BreadcrumbItem,5  BreadcrumbLink,6  BreadcrumbList,7  BreadcrumbPage,8  BreadcrumbSeparator,9} from "@/components/ui/breadcrumb"1011export function Example() {12  return (13    <Breadcrumb>14      <BreadcrumbList>15        <BreadcrumbItem>16          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>17        </BreadcrumbItem>18        <BreadcrumbSeparator />19        <BreadcrumbItem>20          <BreadcrumbEllipsis />21        </BreadcrumbItem>22        <BreadcrumbSeparator />23        <BreadcrumbItem>24          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>25        </BreadcrumbItem>26        <BreadcrumbSeparator />27        <BreadcrumbItem>28          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>29        </BreadcrumbItem>30      </BreadcrumbList>31    </Breadcrumb>32  )33}

Put the ellipsis in a dropdown to keep hidden levels within easy reach.

tsx

1import {2  Breadcrumb,3  BreadcrumbEllipsis,4  BreadcrumbItem,5  BreadcrumbLink,6  BreadcrumbList,7  BreadcrumbPage,8  BreadcrumbSeparator,9} from "@/components/ui/breadcrumb"10import {11  DropdownMenu,12  DropdownMenuContent,13  DropdownMenuItem,14  DropdownMenuTrigger,15} from "@/components/ui/dropdown-menu"1617export function Example() {18  return (19    <Breadcrumb>20      <BreadcrumbList>21        <BreadcrumbItem>22          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>23        </BreadcrumbItem>24        <BreadcrumbSeparator />25        <BreadcrumbItem>26          <DropdownMenu>27            <DropdownMenuTrigger28              aria-label="Show hidden crumbs"29              className="flex size-5 items-center justify-center rounded-sm text-foreground/50 transition-colors duration-200 ease-out hover:bg-surface-hover hover:text-foreground"30            >31              <BreadcrumbEllipsis className="size-4" />32            </DropdownMenuTrigger>33            <DropdownMenuContent align="start">34              <DropdownMenuItem href="/docs/installation">35                Installation36              </DropdownMenuItem>37              <DropdownMenuItem href="/docs/theming">Theming</DropdownMenuItem>38              <DropdownMenuItem href="/docs/installation">Installation</DropdownMenuItem>39            </DropdownMenuContent>40          </DropdownMenu>41        </BreadcrumbItem>42        <BreadcrumbSeparator />43        <BreadcrumbItem>44          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>45        </BreadcrumbItem>46        <BreadcrumbSeparator />47        <BreadcrumbItem>48          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>49        </BreadcrumbItem>50      </BreadcrumbList>51    </Breadcrumb>52  )53}

Icon

Place an icon or logo in any crumb, usually the first. Add aria-label when it has no visible text.

tsx

1import { Logo } from "@/components/brand/logo"2import {3  Breadcrumb,4  BreadcrumbItem,5  BreadcrumbLink,6  BreadcrumbList,7  BreadcrumbPage,8  BreadcrumbSeparator,9} from "@/components/ui/breadcrumb"1011export function Example() {12  return (13    <Breadcrumb>14      <BreadcrumbList>15        <BreadcrumbItem>16          <BreadcrumbLink href="/" aria-label="Home">17            <Logo className="h-3 w-auto" />18          </BreadcrumbLink>19        </BreadcrumbItem>20        <BreadcrumbSeparator />21        <BreadcrumbItem>22          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>23        </BreadcrumbItem>24        <BreadcrumbSeparator />25        <BreadcrumbItem>26          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>27        </BreadcrumbItem>28      </BreadcrumbList>29    </Breadcrumb>30  )31}

Link component

Set asChild on BreadcrumbLink and pass your router's Link component for client-side navigation.

tsx

1import Link from "next/link"2import {3  Breadcrumb,4  BreadcrumbItem,5  BreadcrumbLink,6  BreadcrumbList,7  BreadcrumbPage,8  BreadcrumbSeparator,9} from "@/components/ui/breadcrumb"1011export function Example() {12  return (13    <Breadcrumb>14      <BreadcrumbList>15        <BreadcrumbItem>16          <BreadcrumbLink asChild>17            <Link href="#link-component">Docs</Link>18          </BreadcrumbLink>19        </BreadcrumbItem>20        <BreadcrumbSeparator />21        <BreadcrumbItem>22          <BreadcrumbLink asChild>23            <Link href="#link-component">Components</Link>24          </BreadcrumbLink>25        </BreadcrumbItem>26        <BreadcrumbSeparator />27        <BreadcrumbItem>28          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>29        </BreadcrumbItem>30      </BreadcrumbList>31    </Breadcrumb>32  )33}

API Reference

Prop	Type	Default
className	string	—

1<Breadcrumb>2  <BreadcrumbList>3    <BreadcrumbItem>4      <BreadcrumbLink href="/">Home</BreadcrumbLink>5    </BreadcrumbItem>6    <BreadcrumbSeparator />7    <BreadcrumbItem>8      <BreadcrumbPage>Docs</BreadcrumbPage>9    </BreadcrumbItem>10  </BreadcrumbList>11</Breadcrumb>

BreadcrumbList

Prop	Type	Default
className	string	—

1<BreadcrumbList>2  <BreadcrumbItem>...</BreadcrumbItem>3</BreadcrumbList>

BreadcrumbItem

Prop	Type	Default
className	string	—

1<BreadcrumbItem>2  <BreadcrumbLink href="/">Home</BreadcrumbLink>3</BreadcrumbItem>

BreadcrumbLink

Prop	Type	Default
asChild	boolean	false
href	string	—
className	string	—

1<BreadcrumbLink href="/">Home</BreadcrumbLink>

BreadcrumbPage

Prop	Type	Default
className	string	—

1<BreadcrumbPage>Docs</BreadcrumbPage>

BreadcrumbSeparator

Prop	Type	Default
children	ReactNode	chevron
className	string	—

1<BreadcrumbSeparator />

BreadcrumbEllipsis

Prop	Type	Default
className	string	—

1<BreadcrumbEllipsis />