14 Blocks

shadcn/ui navbar blocks & components.

Site headers and navigation bars built on shadcn/ui: responsive navbars with mobile sheets, mega menus on the NavigationMenu primitive, sticky bars that morph, hide, or blur on scroll, and a command-bar header with a real Ctrl+K palette. Each one drops above any page and brings its own mobile menu.

Full Width Bar With CTA

Header 1Free

Site header spanning the full width with a logo, inline navigation links, a call-to-action button, and a mobile menu sheet.

ButtonSheet

Centered Nav Three Column

Header 2Free

Header with the logo pinned left, navigation links absolutely centered, and sign-in plus a primary CTA right, above a skeleton page-content placeholder.

ButtonSeparatorSheetSkeleton

Sticky Header With Sign In

Header 3Free

Sticky site header with logo, desktop navigation, a sign-in link, a primary CTA, and a state-controlled mobile menu sheet for composing into page templates.

ButtonSheet

Product Dropdown Menu

Header 4Free

Header with a Product navigation menu dropdown listing Analytics, Automations, and Integrations, plus inline links, sign-in and CTA buttons, and a mobile sheet.

ButtonNavigation MenuSheet

Floating Island On Scroll

Header 5Pro

Header that detaches on scroll from a flush full-width bar into a centered floating island, contracting its width as border, shadow, and blur fade in.

ButtonSheet
motion

Mega Menu With Morphing Viewport

Header 6Pro

Mega menu header whose three navigation triggers share one viewport that morphs size and cross-fades content, with hover intent, keyboard support, and a mobile accordion sheet.

AccordionButtonNavigation MenuSheet

Hide On Scroll With Announcement

Header 7Pro

Header that slides away when scrolling down and springs back on any upward scroll, with a dismissible announcement banner that collapses past the first fold.

ButtonSheet
motion

Pill Nav With Scroll Spy

Header 8Pro

Header with a sliding pill that follows the hovered link and snaps to the active one, driven by an IntersectionObserver scroll spy over page sections.

ButtonSheet
motion

Transparent Over Hero

Header 9Pro

Header that starts transparent with white mega-menu navigation over a full-bleed photo hero, then cross-fades to a solid bordered bar once the hero scrolls past.

AccordionButtonNavigation MenuSheet
motion

Utility Row Double Decker

Header 10Pro

Two-row header whose top utility strip (contact link, locale select, social icons) scrolls away while the main navigation row sticks and gains blur and a border.

ButtonNavigation MenuSelectSeparatorSheet
motion

Full Screen Overlay Menu

Header 11Pro

Minimal header whose hamburger morphs into an X and opens a full-viewport overlay of oversized navigation links that stagger in with a blur reveal.

ButtonDialog
motion

Command Palette Search Bar

Header 12Pro

Docs-style header with a search trigger showing a Ctrl+K hint that opens a command palette grouping Pages, Blocks, and Actions, collapsing to an icon on mobile.

ButtonCommandDialogKbdNavigation MenuSheet
motion

Centered Wordmark Header

Header 13Pro

Header with a centered wordmark, dropdown navigation menus on the left, and social links plus a primary CTA on the right over a sticky blur bar.

AccordionButtonNavigation MenuSeparatorSheet

Capsule Nav Header Without A CTA

Header 14Free

Header with the wordmark on the left and the navigation collected into one muted capsule on the right, with a sliding active pill and no call to action.

ButtonSheet
motion