DesignDojo
Component Card

Breadcrumbs

Show hierarchical path so users can move upward quickly.

Settings/Billing/Invoices
Breadcrumb anatomy

When to Use

  • Nested information architecture with 3+ levels.
  • Admin and settings trees where users backtrack often.
  • Long-form content structures like docs categories.

When NOT to Use

Use breadcrumbs only when hierarchy is real and parent routes are meaningful.

If the page is top-level, omit breadcrumbs and keep the header simpler.

Variants

Slash separators
Chevron separators
Collapsed middle items

Confused?

Use breadcrumbs for path context, and use Navbar for global destination switching.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Add breadcrumbs for a deep settings route so users can navigate upward without relying on browser back behavior.

Pencil Prompt

Create a breadcrumb trail for a nested page and style separators so path depth is readable at a glance.

Next Lesson

Card