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 1FreeSite header spanning the full width with a logo, inline navigation links, a call-to-action button, and a mobile menu sheet.
Centered Nav Three Column
Header 2FreeHeader with the logo pinned left, navigation links absolutely centered, and sign-in plus a primary CTA right, above a skeleton page-content placeholder.
Sticky Header With Sign In
Header 3FreeSticky 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.
Product Dropdown Menu
Header 4FreeHeader with a Product navigation menu dropdown listing Analytics, Automations, and Integrations, plus inline links, sign-in and CTA buttons, and a mobile sheet.
Floating Island On Scroll
Header 5ProHeader 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.
Mega Menu With Morphing Viewport
Header 6ProMega 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.
Hide On Scroll With Announcement
Header 7ProHeader that slides away when scrolling down and springs back on any upward scroll, with a dismissible announcement banner that collapses past the first fold.
Pill Nav With Scroll Spy
Header 8ProHeader with a sliding pill that follows the hovered link and snaps to the active one, driven by an IntersectionObserver scroll spy over page sections.
Transparent Over Hero
Header 9ProHeader 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.
Utility Row Double Decker
Header 10ProTwo-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.
Full Screen Overlay Menu
Header 11ProMinimal header whose hamburger morphs into an X and opens a full-viewport overlay of oversized navigation links that stagger in with a blur reveal.
Command Palette Search Bar
Header 12ProDocs-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.
Centered Wordmark Header
Header 13ProHeader 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.