# Breadcrumb

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<Breadcrumb> <BreadcrumbList> <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/">{"Home"}</a></BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/docs">{"Docs"}</a></BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem><span class="text-foreground font-normal" aria-current="page">{"Page"}</span></BreadcrumbItem> </BreadcrumbList> </Breadcrumb>
</div>

```astro
---
---

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/">Home</a></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/docs">Docs</a></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><span class="text-foreground font-normal" aria-current="page">Page</span></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

## Installation

<DocsTabs syncKey="pkg">
  <DocsTabItem label="bun">
  ```bash
  bunx bejamas add breadcrumb
  ```
  </DocsTabItem>
  <DocsTabItem label="npm">
  ```bash
  npx bejamas add breadcrumb
  ```
  </DocsTabItem>
  <DocsTabItem label="pnpm">
  ```bash
  pnpm dlx bejamas add breadcrumb
  ```
  </DocsTabItem>
  <DocsTabItem label="yarn">
  ```bash
  yarn dlx bejamas add breadcrumb
  ```
  </DocsTabItem>
</DocsTabs>

## Usage

```astro nocollapse
---
---

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

## Props

| Prop | Type | Default |
|---|---|---|
| <code>class</code> | `string` | `""` |

## Examples

### Custom separator

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<Breadcrumb> <BreadcrumbList> <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/">{"Home"}</a></BreadcrumbItem> <BreadcrumbSeparator> <SlashIcon /> </BreadcrumbSeparator> <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/docs">{"Docs"}</a></BreadcrumbItem> <BreadcrumbSeparator> <SlashIcon /> </BreadcrumbSeparator> <BreadcrumbItem><span class="text-foreground font-normal" aria-current="page">{"Page"}</span></BreadcrumbItem> </BreadcrumbList> </Breadcrumb>
</div>

```astro
---
---

<Breadcrumb>
   <BreadcrumbList>
      <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/">Home</a></BreadcrumbItem>
      <BreadcrumbSeparator>
        <SlashIcon />
      </BreadcrumbSeparator>
      <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/docs">Docs</a></BreadcrumbItem>
      <BreadcrumbSeparator>
        <SlashIcon />
      </BreadcrumbSeparator>
      <BreadcrumbItem><span class="text-foreground font-normal" aria-current="page">Page</span></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```