DesignDojo
1.2-components · 07-tabs

Estimated time: 6 min

Tabs anatomy

When to Use

  • Peer sections like Profile, Billing, and Security.
  • Context-preserving switches where users stay on one page.
  • Compact desktop navigation for 3-6 related panels.

When NOT to Use

Use tabs for equivalent categories that share one page context.

For deep navigation paths, use sidebar or navbar instead.

Variants

Underline tabs
Pill tabs
Segmented control

Confused?

If users need path context, pair tabs with Breadcrumbs or use breadcrumbs alone for deep routes.

Agent Prompts

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

Agent Prompts

Cursor Prompt

Implement tabs for switching between account sections with a clear active indicator and keyboard-accessible focus states.

Pencil Prompt

Design a horizontal tab bar with one active tab style and two inactive styles that still read as interactive.

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

Breadcrumbs