Breadcrumbs

Name: Breadcrumbs
Author: reaviz

ASecurity

Navigation breadcrumb trail built with composable sub-components: Breadcrumbs, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, and BreadcrumbPage.

4 stars
0 votes
0 copies
1 view
Added May 27, 2026

data-aitypescript

Security analysis

A100/100

Scanned May 27, 2026

npx -y skills add reaviz/skills --skill breadcrumbs --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Breadcrumbs?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/reaviz-breadcrumbs/badge)](https://www.skillsdirectory.com/skills/reaviz-breadcrumbs)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

# Breadcrumbs

Navigation breadcrumb trail built with composable sub-components: Breadcrumbs, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, and BreadcrumbPage.

## Import

```tsx
import {
  Breadcrumbs,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage
} from 'reablocks';
```

## Basic Usage

```tsx
<Breadcrumbs>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/products">Products</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumbs>
```

## Sub-components

- **Breadcrumbs** — `<nav>` wrapper with `aria-label="breadcrumbs"`
- **BreadcrumbList** — `<ol>` container with flex layout and gap
- **BreadcrumbItem** — `<li>` wrapper for each breadcrumb entry
- **BreadcrumbLink** — `<a>` link with hover transition styles
- **BreadcrumbSeparator** — Separator element (default: `/` character)
- **BreadcrumbPage** — Current page marker (styled as active, pointer-events-none)

## Breadcrumbs Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `theme` | `BreadcrumbsTheme` | — | Per-instance theme override |
| `className` | `string` | — | Additional CSS classes |

Also accepts all standard `<nav>` HTML attributes.

## BreadcrumbsTheme Interface

```typescript
interface BreadcrumbsTheme {
  base: string;        // Nav container
  separator: string;   // Separator icon sizing
  list: string;        // List container (flex, gap, items-center)
  link: string;        // Link styles (hover, transition)
  activePage: string;  // Active page (primary color, pointer-events-none)
}
```