←Back to docs
Recipe

Topbar design patterns

A collection of production-ready topbar layouts for SaaS dashboards, admin panels, and developer tools.

Minimal breadcrumb

Logo left, breadcrumb center, avatar right. Works best for content-heavy apps with deep navigation.

3 zonessticky

Command palette

Search bar centered, cmd+k trigger, keyboard-first navigation. Ideal for developer tools and power-user dashboards.

search⌘K

Split actions

Primary CTA right, secondary actions grouped left. Common in CRUD dashboards and settings pages.

CTAdropdown

Contextual tabs

Tabs inline with the topbar, switching views without full page reloads. Great for analytics and multi-view dashboards.

tabsSPA-like

Quick rules

  • 01Keep the topbar height between 48px and 64px.
  • 02Use sticky positioning with a solid background to prevent content bleed-through.
  • 03Limit to three zones: left, center, right. More creates visual noise.
  • 04Match the topbar border color to your sidebar for visual cohesion.