DesignDojo
Component Card

Navbar

Provide top-level wayfinding and global actions.

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.

Next Lesson

Sidebar