UI Skillbook
2

Breadcrumb

A row of links tracing the path from the site root to the current page, so people can climb back up.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-breadcrumb and follow the Siteplane Breadcrumb skill it prints for this task.

Paste this into your agent.

Breadcrumb suits pages nested a few levels deep, such as a project inside a workspace. People see where they are and can jump to any level above. Keep the main navigation alongside it.

Install

bashnpx shadcn@4.18.0 add @siteplane/breadcrumb

Import it from @/siteplane/components/breadcrumb. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Stepper: Pick Stepper instead when the trail shows progress through an ordered process.
  • vs Sidebar: Pick Sidebar for the main application navigation; a breadcrumb only shows one path through it.

Rules

  • Mark the current location with BreadcrumbPage so it carries aria-current page. Don't make it a link.
  • Place each BreadcrumbSeparator between items as a sibling. Never nest one inside a BreadcrumbItem.
  • Pass a router link through render on BreadcrumbLink so client navigation keeps native anchor semantics.
  • BreadcrumbEllipsis is decoration. To make hidden levels reachable, put them behind a labelled menu trigger.
  • Change the Breadcrumb aria-label when a page has more than one trail.

Reference

  • Breadcrumb docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Navigation. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-breadcrumb

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Siteplane Commandby UI Skillbook

A searchable, keyboard-driven list of actions, shown inline in a panel or as a command palette in a dialog.

Siteplane UI

Siteplane Paginationby UI Skillbook

Previous, Next and numbered page links for stepping through a long list or table.

Siteplane UI

Siteplane Tabsby UI Skillbook

Keyboard-navigable tabs that switch between related panels of content on the same page.

Siteplane UI

Accessibilityby addyosmani

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

AccessibilityExternalGitHub stars: 3K

Back to Siteplane UI