A sticky marketing header with a translucent blurred background, brand link, nav links that hide on mobile and Sign in and Get started buttons. Tailwind built.
npx shadcn@latest add @minidev/nav-marketingCode Navbars, headers and navigation menus for React
Free navbar and header components for React and Tailwind CSS v4: a marketing nav with mega menu, a floating nav, a mobile nav drawer, a navigation menu built on Base UI and page headers. MIT.
8 blocksFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
The navbar is on every page, so it has to be right on every screen size: a menu that works with keyboard and screen readers on desktop, and a drawer that is easy to reach with a thumb on phones. These components cover marketing sites and product apps.
Floating Nav
blockA sticky marketing navbar that tucks into a floating pill after you scroll, with a hover highlight that glides between links and an animated mobile menu.
npx shadcn@latest add @minidev/floating-navCode A site navigation menu built on Base UI with triggers that open rich dropdown panels in a shared viewport, plus link items. Mirrors the shadcn navigation menu.
npx shadcn@latest add @minidev/navigation-menuCode A hamburger button that opens a right side navigation drawer as a modal dialog, with a close button and links that dismiss it on tap. Built in React.
npx shadcn@latest add @minidev/mobile-nav-drawerCode A Tailwind page title block with an h1, an optional description and a wrapping slot for action buttons on the right, set off by a bottom border.
npx shadcn@latest add @minidev/page-headerCode Slim site-wide announcement bar for launches, promos or notices. Centered content, a polite status role for screen readers and an optional dismiss button.
npx shadcn@latest add @minidev/announcement-barCode Sidebar with a toggle button on its edge that collapses it to a narrow rail and expands it again. The button label updates for screen readers.
npx shadcn@latest add @minidev/collapsible-sidebarCode Frequently asked questions
How do I build a responsive navbar in React?
Use one component for the desktop menu and a drawer for small screens, switch with a Tailwind breakpoint, and keep both lists in one data array so they never drift. The sidebar layout guide covers the app version.