PenTool UIالعربيةBrowse the library

Navbars · Navigation

Navbars in Navigation: 12 designs — Navbar with Account and Alerts · Navbar with Announcement Bar · Compact App Bar · Navbar with Breadcrumb

All Navigation designs

Designs

RTL VerifiedLTR Verified Navigation

Navbar with Account and Alerts

Two separate menus — opening one closes the other

Advanced
Code Prompt
RTL VerifiedLTR Verified Navigation

Navbar with Announcement Bar

A promo strip above with a real timer that stays dismissed

Intermediate
Code Prompt
RTL VerifiedLTR Verified Navigation

Compact App Bar

The slimmest size, with a project switcher and a command key

Advanced
Code Prompt
RTL VerifiedLTR Verified Navigation

Navbar with Breadcrumb

A hierarchical trail whose separators mirror with direction

Beginner
Code Prompt
RTL VerifiedLTR Verified Navigation

Centred-Logo Navbar

Logo in the centre with links balanced on both sides

Beginner
Code Prompt
RTL VerifiedLTR Verified Navigation

Classic Navbar

Logo, links and one action — the baseline that always works

Beginner
Code Prompt
RTL VerifiedLTR Verified Navigation

Navbar with Mega Menu

A multi-column panel that closes on Escape and outside click

Advanced
Code Prompt
RTL VerifiedLTR Verified Navigation

Mobile Navbar with Sheet

A hamburger that opens a full sheet and traps focus

Intermediate
Code Prompt
RTL VerifiedLTR Verified Navigation

Navbar with Centre Search

The search expands on focus without shifting the layout

Intermediate
Code Prompt
RTL VerifiedLTR Verified Navigation

Shrinking Navbar

Starts tall, shrinks on scroll, and restores at the top

Advanced
Code Prompt
RTL VerifiedLTR Verified Navigation

Navbar with Secondary Tabs

Two rows: identity above, tabs below with a sliding indicator

Intermediate
Code Prompt
RTL VerifiedLTR Verified Navigation

Transparent Navbar that Fills

Transparent over the hero, gains a background on scroll

Intermediate
Code Prompt