# Shadcn Ui Breadcrumb

> Build breadcrumb navigation with ShadBreadcrumb, ShadBreadcrumbLink, ShadBreadcrumbDropdown, custom separator. Use when showing navigation path, hierarchy of links, or dropdown breadcrumb in a Flutter shadcn_ui app.

- **Type:** Skill
- **Install:** `agentstack add skill-serverpod-skills-registry-shadcn-ui-breadcrumb`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [serverpod](https://agentstack.voostack.com/s/serverpod)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** BSD-3-Clause
- **Upstream author:** [serverpod](https://github.com/serverpod)
- **Source:** https://github.com/serverpod/skills-registry/tree/main/skills/shadcn_ui/shadcn_ui-breadcrumb

## Install

```sh
agentstack add skill-serverpod-skills-registry-shadcn-ui-breadcrumb
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Shadcn UI — Breadcrumb

## Instructions

`ShadBreadcrumb` displays the path to the current resource using a hierarchy of links. Children can be `ShadBreadcrumbLink`, `ShadBreadcrumbDropdown`, or plain widgets (e.g. `Text` for current page).

### Basic breadcrumb

```dart
ShadBreadcrumb(
  children: [
    ShadBreadcrumbLink(
      onPressed: () => print('Navigating to Home'),
      child: const Text('Home'),
    ),
    ShadBreadcrumbDropdown(
      items: [
        ShadBreadcrumbDropMenuItem(
          onPressed: () => print('Navigating to Documentation'),
          child: const Text('Documentation'),
        ),
        ShadBreadcrumbDropMenuItem(
          onPressed: () => print('Navigating to Themes'),
          child: const Text('Themes'),
        ),
      ],
      showDropdownArrow: false,
      child: ShadBreadcrumbEllipsis(),
    ),
    Text('Components'),
    Text('Breadcrumb'),
  ],
)
```

### Custom separator

Default separator is `>`. Override with `separator`:

```dart
ShadBreadcrumb(
  separator: const Icon(LucideIcons.slash),
  children: [
    ShadBreadcrumbLink(onPressed: () {}, child: const Text('Home')),
    ShadBreadcrumbLink(onPressed: () {}, child: const Text('Components')),
    Text('Breadcrumb'),
  ],
)
```

### Dropdown in breadcrumb

Use `ShadBreadcrumbDropdown` with `items` (list of `ShadBreadcrumbDropMenuItem`) and `child` (trigger widget). Use `ShadBreadcrumbEllipsis()` for an ellipsis trigger.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [serverpod](https://github.com/serverpod)
- **Source:** [serverpod/skills-registry](https://github.com/serverpod/skills-registry)
- **License:** BSD-3-Clause

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-serverpod-skills-registry-shadcn-ui-breadcrumb
- Seller: https://agentstack.voostack.com/s/serverpod
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.