Navbar Blocks
Copy-paste React site headers: simple and centered logo/link layouts, mega and product dropdown menus, search and account menus, mobile hamburger navigation, and scroll-aware sticky and transparent-to-solid headers. Each block ships as plain, editable component code, not a runtime dependency.
Simple Logo Links CTA
Wordmark on the left, a row of nav links, and a single CTA button on the right.
Centered Logo Split Links
Logo centered in the header with nav links evenly split to its left and right.
Mega Menu Dropdown
A trigger that opens a wide, multi-column mega menu panel below the header.
Navbar With Search
Logo, a few nav links, and a labeled search input with an inline icon.
Two Tier Utility Nav
A thin utility link row above the main navigation row.
Minimal Logo CTA Only
The simplest possible header: just a logo and a single CTA button, no nav links.
Mobile Hamburger Menu
Wordmark, a CTA button, and a hamburger icon that toggles a vertical nav list open and closed.
Navbar With Account Dropdown
Logo and nav links with an initials avatar on the right that opens an account menu on click.
Navbar With Theme Toggle
Logo, nav links, and a light/dark toggle button that swaps between a sun and moon icon.
Product Dropdown Icons
A nav item that opens a grid of product links, each with an icon, title, and short description.
Navbar With Notification Bell
Logo and nav links with a bell icon showing a small numeric unread-count badge.
Bordered Divided Links
A bordered header where each nav link is separated from the next by a vertical divider line.
Navbar With Announcement Bar
A thin promotional strip above the main nav row.
Sticky Scroll Shadow
A sticky navbar that gains a shadow once the page scrolls.
Transparent To Solid Scroll
A navbar that starts transparent over a hero and turns solid on scroll.
Pill Tabs Navigation
Nav links styled as a rounded pill/segmented-control group.