Navbar Components

Dev Design Library indexes 157 navbar components from 45 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. Navbar components belong to the Navigation group.

Showing 120 of 157, 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.
• App BarMUI / Material UI · React
• Card NavReact Bits · ReactExpandable navigation bar with card panels revealing nested links.
• 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.
• HeaderLobe UI · ReactThe Header component is a customizable header section with a logo, navigation, and actions. It is responsive and…
• 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
• Stretch HeaderSwiftPieces · SwiftUIA hero header that stretches on overscroll, shrinks its title toward the navigation bar and pins a row of glass stat…
• 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.
• Site headerArc Library · ReactA sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet.
• 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.
• MenubarROI UI · ReactA horizontal menu bar component.
• Floating NavbarVelora UI · ReactHides on scroll down, returns the moment you scroll up.
• MenubarHalaska UI · React
• Luna NavbarPin UI · React
• MenubarSpaceUI · ReactProvides a horizontal desktop-style menu bar with nested dropdowns and submenus for organizing complex application…
• Base MenubarReScript shadcn · ReScript
• 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
• Card HeaderMUI / Material UI · React
• Gooey NavReact Bits · ReactNavigation indicator morphs with gooey blob transitions between items.
• Comp 578Origin UI · React
• Menubar with dropdown submenus.ReUI · ReactMenubar with dropdown submenus.
• Chat Chat HeaderLobe UI · React
• 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.
• Navigation MenuROI UI · ReactA navigation menu component.
• 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
• Pill NavReact Bits · ReactMinimal pill nav with sliding active highlight + smooth easing.
• Comp 579Origin UI · React
• Menubar with checkbox & radio items.ReUI · ReactMenubar with checkbox & radio items.
• Mobile Chat HeaderLobe UI · React
• 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

Libraries with navbar components

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

Related categories

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