Breadcrumb

A navigation path showing the user's location in the site hierarchy with links to parent pages.

1
---
2
import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator } from '@bejamas/ui/components/breadcrumb';
3
---
4

5
<Breadcrumb>
6
  <BreadcrumbList>
7
    <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/">Home</a></BreadcrumbItem>
8
    <BreadcrumbSeparator />
9
    <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/docs">Docs</a></BreadcrumbItem>
10
    <BreadcrumbSeparator />
11
    <BreadcrumbItem><span class="text-foreground font-normal" aria-current="page">Page</span></BreadcrumbItem>
12
  </BreadcrumbList>
13
</Breadcrumb>

Installation

bunx bejamas add breadcrumb

npx bejamas add breadcrumb

pnpm dlx bejamas add breadcrumb

yarn dlx bejamas add breadcrumb

Usage

1
---
2
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbSeparator } from '@bejamas/ui/components/breadcrumb';
3
---
4

5
<Breadcrumb>
6
  <BreadcrumbList>
7
    <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
8
    <BreadcrumbSeparator />
9
    <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
10
  </BreadcrumbList>
11
</Breadcrumb>

Props

Prop	Type	Default
`class`	`string`	`""`

Examples

Custom separator

1
---
2
import { SlashIcon } from '@lucide/astro';
3

4
import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator } from '@bejamas/ui/components/breadcrumb';
5
---
6

7
<Breadcrumb>
8
   <BreadcrumbList>
9
      <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/">Home</a></BreadcrumbItem>
10
      <BreadcrumbSeparator>
11
        <SlashIcon />
12
      </BreadcrumbSeparator>
13
      <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/docs">Docs</a></BreadcrumbItem>
14
      <BreadcrumbSeparator>
15
        <SlashIcon />
16
      </BreadcrumbSeparator>
17
      <BreadcrumbItem><span class="text-foreground font-normal" aria-current="page">Page</span></BreadcrumbItem>
18
  </BreadcrumbList>
19
</Breadcrumb>