Animated Navbar Components

Dev Design Library indexes 42 Animated navbar components from 18 open-source UI libraries, with the most coming from Rewamp UI, Velora UI, React Bits, Aceternity UI and Vengeance UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the navbar components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Navbar components belong to the Navigation group.

• Card NavReact Bits · ReactExpandable navigation bar with card panels revealing nested links.
• Split NavKokonut UI · ReactNavigation bar that splits around the active link, with drag-to-scrub, flick projection and an optional compact fold.
• 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…
• Scroll HeaderPanel UI · React NativeA screen title that hands over to a compact bar as the page scrolls.
• 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.
• 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.
• Radial NavWatermelon UI · React
• 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…
• Floating NavbarVelora UI · ReactHides on scroll down, returns the moment you scroll up.
• 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
• Gooey NavReact Bits · ReactNavigation indicator morphs with gooey blob transitions between items.
• Tab NavbarSpectrum UI · Reactcomponent for the Tab Navbar
• 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.
• Gooey Navbaruselayouts · ReactA pill nav that melts into its neighbor when you hover — liquid bridges, active dot.
• Fluid Wave NavbarRewamp UI · ReactNavigation bar with a fluid wave that follows the hovered or active item.
• 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.
• Spotlight NavbarVengeance UI · ReactNavbar with animated spotlight effect
• Hero Morph NavbarRewamp UI · ReactNavigation bar that changes shape and size as the page scrolls past the hero.
• Navbar MenuVelora UI · ReactHover-driven menu whose pill and panel morph between items.
• MenubarReactFrame · ReactA desktop-style app menubar with File/Edit/View-style dropdown menus, checkbox and radio items, submenus and full…
• Resizable NavbarAceternity UI · React
• Jelly Scoop NavbarRewamp UI · ReactNavigation bar whose active indicator moves with a jelly, wobbly motion.
• Resizable NavbarVelora UI · ReactFull-width navbar that shrinks into a floating, blurred pill once you scroll.
• Liquid Underline NavbarRewamp UI · ReactNavigation bar with an underline that stretches like liquid from one link to the next.
• Pill Expand NavbarRewamp UI · ReactPill-shaped navigation bar that expands to reveal its links.
• Dark Mode Mobile NavbarRewamp UI · React
• Magnetic Pill NavbarRewamp UI · React
• Morphing Tab NavbarRewamp UI · React
• Orbiting Planets NavbarRewamp UI · React
• Pixel Dot NavbarRewamp UI · React

Libraries with Animated navbar components

• Rewamp UI
• Velora UI
• React Bits
• Aceternity UI
• Vengeance UI

Related categories

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