Tailwind CSS Navbar Components

Dev Design Library indexes 142 Tailwind CSS navbar components from 36 open-source UI libraries, with the most coming from Origin UI, Watermelon UI, cnblocks, Rewamp UI and ReUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Navbar components belong to the Navigation group.

Showing 120 of 142, a mix from every library. Open a library to see all of its components.

• Menubarshadcn/ui · ReactA visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
• NavbardaisyUI · CSS (Tailwind)
• Comp 577Origin UI · React
• Basic menubar.ReUI · ReactBasic menubar.
• Web PreviewAI Elements · ReactA composable component for previewing the result of a generated UI, with support for live examples and code display.
• Split NavKokonut UI · ReactNavigation bar that splits around the active link, with drag-to-scrub, flick projection and an optional compact fold.
• navbarIntent UI · Reactnavbar
• App NavigationUntitled UI React · React
• MenubarTailGrids · ReactA responsive menu bar component that provides a horizontal row of menu triggers, each opening a dropdown menu.
• Scroll ProgressRare UI · ReactA scroll progress pill that tracks reading position and expands into a squircle menu of sections you can jump to.
• Circular NavbarSpectrum UI · Reactcomponent for the Circular Navbar
• Awwwards NavVengeance UI · ReactGlass bottom nav that expands into a mega-menu
• Sidebar Inset TopbarFluid Functionalism · ReactThe main region's topbar: h-12 with the trigger that hides while the rail peeks and fades back in at its settled spot…
• MenubarToolcraft · React
• NavbarLaunch UI · React
• Page HeaderPanel UI · React NativeCover, face and actions at the top of a profile.
• Navbar 01 - Minimal Agency NavbarShadcn Space · ReactA clean top navigation bar with logo, page links, and standout CTA button, ideal for agency or SaaS websites to guide…
• Glass Scroll NavbarPixel Perfect · ReactA fixed glass navbar refracts scrolling editorial images through a curved lens with spectral color separation.
• Bottom Menuuselayouts · ReactA floating bottom navigation menu with smooth interactions.
• App ShellBoardUI · ReactThe page standard every BoardUI template follows, free or Pro: content sits directly on the page background inside a…
• Tab NavigationTremor Blocks · React
• Headercnblocks · SvelteStandard navigation header with logo and links
• MenubarObsidianUI · React
• Navbars 01Oxbow UI · Astro
• Table of ContentsNexvyn UI · ReactA fixed bottom-left floating block that tracks scroll position, shows the active section, and expands into a navigable…
• Curtain Reveal NavbarRewamp UI · ReactNavigation bar whose menu opens like a curtain sliding down over the page.
• Journal NavigationWatermelon UI · React
• Header Fivesv-efferd · SvelteA polished rounded header with compact mega-menu panels and stronger pill-shaped actions.
• Morphing NavUI Lab · ReactOne dropdown panel reshapes and slides as you move between menu items.
• MenubarHextaUI · ReactA desktop-style bar of menus with one highlight that slides between open menus and instant switching as you sweep…
• MenubarCojeev UI · ReactGroups application commands into a horizontal row of keyboard-navigable menus.
• Floating NavbarVelora UI · ReactHides on scroll down, returns the moment you scroll up.
• MenubarSpaceUI · ReactProvides a horizontal desktop-style menu bar with nested dropdowns and submenus for organizing complex application…
• Floating NavFibo · ReactA pill of destinations that floats above the bottom of a phone screen and steps aside while you scroll.
• Glass NavigationReactFrame · ReactA pill navbar that expands into a full panel of large nav links, a tagline, and social links, with a CTA button…
• Floating NavbarAceternity UI · React
• Comp 578Origin UI · React
• Menubar with dropdown submenus.ReUI · ReactMenubar with dropdown submenus.
• navbar-01Intent UI · Reactnavbar-01
• Navigation MenuTailGrids · ReactA navigation menu component that provides a clear visual structure for the primary links of a website or application.
• Floating NavbarSpectrum UI · Reactcomponent for the Floating Navbar
• Mega Menu NavbarVengeance UI · ReactResponsive SaaS navbar with rich dropdowns and a mobile drawer
• Navbar SectionLaunch UI · React
• Scroll HeaderPanel UI · React NativeA screen title that hands over to a compact bar as the page scrolls.
• Gooey Navbaruselayouts · ReactA pill nav that melts into its neighbor when you hover — liquid bridges, active dot.
• Page Shell 01Tremor Blocks · React
• Header Eightcnblocks · SvelteNavigation header for Hero Eight
• Playground NavbarObsidianUI · React
• Navbars 02Oxbow UI · Astro
• Fluid Wave NavbarRewamp UI · ReactNavigation bar with a fluid wave that follows the hovered or active item.
• Journal Navigation BaseWatermelon UI · React
• Header Foursv-efferd · SvelteA floating rounded header with stronger auth actions and a simplified mobile drawer.
• Floating pill navbarVelora UI · ReactFull-width navbar that shrinks into a blurred floating pill on scroll, with a CTA and mobile menu.
• Navbar 01ReactFrame · ReactA responsive site header, centered nav links on desktop, a tablet CTA-only view, and a mobile hamburger dropdown…
• Navbar MenuAceternity UI · React
• Comp 579Origin UI · React
• Menubar with checkbox & radio items.ReUI · ReactMenubar with checkbox & radio items.
• navbar-02Intent UI · Reactnavbar-02
• Navbar DemoSpectrum UI · Reactcomponent for the Navbar Demo
• Notch NavbarVengeance UI · ReactResponsive navbar with a sleek cutout notch design
• Web Scroll HeaderPanel UI · React NativeA page header that shrinks and turns to glass as you scroll, with share and bookmark actions.
• Page Shell 02Tremor Blocks · React
• Header Fivecnblocks · SvelteNavigation header for Hero Five
• Navbars 03Oxbow UI · Astro
• Hero Morph NavbarRewamp UI · ReactNavigation bar that changes shape and size as the page scrolls past the hero.
• Navigation 1Watermelon UI · React
• Header Onesv-efferd · SvelteA clean sticky header with simple nav links and a compact mobile sheet.
• Mega menu navbarVelora UI · ReactTop bar with a keyboard-accessible Product mega menu, search, sign-in and a slide-over mobile menu.
• MenubarReactFrame · ReactA desktop-style app menubar with File/Edit/View-style dropdown menus, checkbox and radio items, submenus and full…
• Resizable NavbarAceternity UI · React
• Comp 580Origin UI · React
• Menubar with icons.ReUI · ReactMenubar with icons.
• navbar-03Intent UI · Reactnavbar-03
• Sidebar NavbarSpectrum UI · Reactcomponent for the Sidebar Navbar
• Spotlight NavbarVengeance UI · ReactNavbar with animated spotlight effect
• Page Shell 03Tremor Blocks · React
• Header Fourcnblocks · SvelteNavigation header for Hero Four
• Navbars 04Oxbow UI · Astro
• Jelly Scoop NavbarRewamp UI · ReactNavigation bar whose active indicator moves with a jelly, wobbly motion.
• Navigation 2Watermelon UI · React
• Header Threesv-efferd · SvelteA richer sticky header with mega-menu navigation and a full mobile fallback.
• Navbar MenuVelora UI · ReactHover-driven menu whose pill and panel morph between items.
• Comp 581Origin UI · React
• Menubar for formatting and media.ReUI · ReactMenubar for formatting and media.
• navbar-04Intent UI · Reactnavbar-04
• Tab NavbarSpectrum UI · Reactcomponent for the Tab Navbar
• MenubarVengeance UI · React
• Page Shell 04Tremor Blocks · React
• Header Ninecnblocks · SvelteNavigation header for Hero Nine
• Navbars 05Oxbow UI · Astro
• Liquid Underline NavbarRewamp UI · ReactNavigation bar with an underline that stretches like liquid from one link to the next.
• Navigation 3Watermelon UI · React
• Header Twosv-efferd · SvelteA framed sticky header with tighter proportions and a softer product shell.
• Resizable NavbarVelora UI · ReactFull-width navbar that shrinks into a floating, blurred pill once you scroll.
• Comp 582Origin UI · React
• Basic navigation menu.ReUI · ReactBasic navigation menu.
• navbar-05Intent UI · Reactnavbar-05
• Page Shell 05Tremor Blocks · React
• Header Sevencnblocks · SvelteNavigation header for Hero Seven
• Navbars 06Oxbow UI · Astro
• Pill Expand NavbarRewamp UI · ReactPill-shaped navigation bar that expands to reveal its links.
• Navigation 4Watermelon UI · React
• Comp 583Origin UI · React
• Navigation menu with grid layout.ReUI · ReactNavigation menu with grid layout.
• Page Shell 06Tremor Blocks · React
• Header Sixcnblocks · SvelteNavigation header for Hero Six
• Navbars 07Oxbow UI · Astro
• Dark Mode Mobile NavbarRewamp UI · React
• Navigation 5Watermelon UI · React
• Comp 584Origin UI · React
• Navigation menu with icons.ReUI · ReactNavigation menu with icons.
• Header Threecnblocks · SvelteNavigation header for Hero Three
• Navbars 08Oxbow UI · Astro
• Magnetic Pill NavbarRewamp UI · React
• Navigation 6Watermelon UI · React
• Comp 585Origin UI · React
• Navigation menu with grid layout and learn more button.ReUI · ReactNavigation menu with grid layout and learn more button.
• Header Twocnblocks · SvelteNavigation header for Hero Two
• Morphing Tab NavbarRewamp UI · React
• Navigation 7Watermelon UI · React

Libraries with Tailwind CSS navbar components

• Origin UI
• Watermelon UI
• cnblocks
• Rewamp UI
• ReUI

Related categories

• Navbar Components
• React Navbar Components
• Svelte Navbar Components
• Animated Navbar Components
• shadcn/ui Navbar Components
• Tailwind CSS Navigation Components
• Tailwind CSS Menu Components
• Tailwind CSS Tabs Components
• Tailwind CSS Stepper Components
• Tailwind CSS Sidebar Components
• Tailwind CSS Pagination Components
• Tailwind CSS Breadcrumb Components
• Tailwind CSS Command Palette Components
• Tailwind CSS Context Menu Components
• Tailwind CSS Mega Menu Components
• Tailwind CSS Dock Components
• Tailwind CSS Wizard Components
• Tailwind CSS Table Of Contents Components
• Tailwind CSS Tab Bar Components
• Tailwind CSS Hamburger Menu Components