DesignDojo
1.2-components · 05-navbar

Estimated time: 7 min

Navbar anatomy

When to Use

  • Top-level app sections that persist across pages.
  • Brand + navigation + primary action in one stable bar.
  • Desktop layouts where horizontal scan is natural.

When NOT to Use

Keep nav items short and prioritize one clear CTA in the right zone.

For deep in-app sections, pair navbar with sidebar instead of adding nested nav rows.

Variants

Marketing nav
App nav
Mobile collapsed

Confused?

Use Tabs for local, in-page views and navbar for app-level navigation.

Agent Prompts

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

Agent Prompts

Cursor Prompt

Create a top navigation bar with logo left, primary links center, and one prominent CTA right, including a compact mobile variant.

Pencil Prompt

Build a navbar with brand, nav links, and right-side CTA, then show a mobile collapsed version in a second frame.

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

Sidebar