SayUI
← Library→ Turn this into a prompt
Navigation & structure

Breadcrumb

A trail of links showing the path from the root to the current page.

Also known as path nav · hierarchy trail · crumb trail

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Breadcrumb".

Add a breadcrumb under the header: Home / Projects / Alpha / Settings, with ancestors as links, the last item as plain text with aria-current=page, and collapsed middle crumbs on narrow viewports.

Anatomy:
- crumb link: Each ancestor is a link; current page is text, not a link.
- separator: Slash or chevron; hide from screen readers or mark decorative.

Preferred API / pattern: `shadcn Breadcrumb`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Current page is still a link to itself
  • ○Avoid: No landmark
  • ○Avoid: Endless crumbs on mobile

In plain wordsHow people search for it

“the Home > Folder > File path at the top of the page”“those little links showing where I am in the site”“the clickable trail so I can jump back up a level”

AnatomyOpen for part names

crumb link
Each ancestor is a link; current page is text, not a link.
separator
Slash or chevron; hide from screen readers or mark decorative.

How to write itOpen for stack patterns

Web (HTML/CSS)nav aria-label="Breadcrumb" + ordered links
React + Tailwind + shadcn/uishadcn Breadcrumb
SwiftUIcustom HStack of links / NavigationPath UI
Ant Design<Breadcrumb items>

Notes

Breadcrumbs orient users in deep hierarchies (docs, file trees, multi-level settings). Collapse middle crumbs on small screens. Don't duplicate the primary nav's entire structure. Current page should not be an active link to itself.

Common mistakesHumans and models trip here

  • Current page is still a link to itself: use aria-current and non-link text.
  • No landmark: wrap in nav with an accessible name.
  • Endless crumbs on mobile: collapse middle segments.

More failure symptoms on AI broke it.

Related patterns

TabsA row of labels that swap mutually exclusive views in the same place.PaginationControls that split large result sets into numbered pages.Tree ViewA hierarchical list where nodes expand and collapse to reveal children.

Spotted a wrong name or missing pattern?

Message on X