DesignDojo
1.2-components · 08-breadcrumbs

Estimated time: 5 min

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.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Card