Navbar

The header people use to find their way. Keep it short: five links, one primary action, and a menu that works with a thumb.

6 variants 01Original 02Centered logo 03With search 04Dark with pill links 05Floating glass 06Two-tier with utility bar

01OriginalThe live site header at the top of this page

#v1

The original header is live at the top of this page

Mega menus for Product and Resources, a theme picker, a sticky glass bar on scroll and a full-screen drawer below 1024px. Markup lives in partials/navbar.html, styles in css/sections/navbar.css.

Back to top

02Centered logoLinks split around the brand mark

#v2
DocsSign inGet started

03With searchCommand-K search field between links and actions

#v3
Dashboard

04Dark with pill linksDark bar, links grouped in a pill with an active state

#v4
Sign inStart free

05Floating glassDetached rounded bar with blur over the hero

#v5
Get started

06Two-tier with utility barAnnouncement and support links above the main bar

#v6

New Nexus for JetBrains is out. Install it

Contact salesSign inGet started