Navbar
Responsive navbar editions with full-width mega menus, morphing menus, an expanding pill, and compact mobile navigation.
Pill navigation
navbar-pill-groups.tsxA centered navigation pill and separate account actions, with a contained morphing dropdown and mobile accordions.
Built around your ideas
A little more room to make things happen.
Bring your team and your best work into the same space.
Install
Morphing navbar
navbar-morph.tsxA centered nav whose dropdown is one shared-layout panel that slides and resizes between triggers, plus a hamburger-to-sheet mobile morph.
Install
Feature morph
navbar-feature-morph.tsxA fixed-width centered pill with hover-open dropdown triggers that spring downward into a 2×2 feature panel without shifting the surrounding page layout.
Install
Expanding pill
navbar-expand.tsxA floating navbar whose width expands continuously with scroll, with a shared-layout hover and active pill plus a rounded overlay mobile menu.
Scroll to expand the navigation
Install
Simple header
navbar-simple.tsxA restrained full-width header that moves from transparent to lightly blurred on scroll, with simple links and a non-shifting overlay mobile menu.
Product workspace
A simple header that stays out of the way.
Scroll this preview to see the transparent navigation settle into a lightly blurred surface.