Dev Design LibraryAnimated Menu Components
Dev Design Library indexes 103 Animated menu components from 34 open-source UI libraries, with the most coming from Watermelon UI, Nexvyn UI, Sona UI, React Bits and Arc Library. 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 menu components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Menu components belong to the Navigation group.
Branched MenuReact Bits · ReactCollapsible menu whose sections unfold into a trunk with a curved branch to each child, and an accent line that…
MenudaisyUI · CSS (Tailwind)
DropdownHeroUI · ReactA dropdown displays a list of actions or options that a user can choose
MenuHeadless UI · React
Dropdown Menu Morphtransitions.dev · HTML/CSSButton that grows and changes shape into its dropdown menu instead of opening a separate panel.
Category SelectAmicro Micro Transitions · React
Command PaletteKokonut UI · React⌘K command palette with nested pages, fuzzy matching and in-row progress for running actions.
Bloom MenubeUI · ReactA button that morphs open into a menu and blooms iris-out from the center, the grid revealing in every direction with…
Profile DropdownSpectrum UI · Reactcomponent for the Profile Dropdown
Awwwards NavVengeance UI · ReactGlass bottom nav that expands into a mega-menu
Command MenuFluid Functionalism · ReactSearch field over a list of actions: type to filter, arrows to move the fluid hover highlight, Enter to run. Grouped…
Text Selection PopoverUser Interface Wiki · React
Dropdown Menu 07 - ExportShadcn Space · ReactAn export dropdown menu opened from a round button with a circular progress ring, with format items, a more-formats…
Bottom Menuuselayouts · ReactA floating bottom navigation menu with smooth interactions.
Orbital Action MenuKinetics · HTML/CSSActions escape a magnetic centre on hover
Floating Dock MenuGreatUI · React
Adaptive ActionsNexvyn UI · ReactA responsive action toolbar that measures its available inline size and moves overflowed items into an accessible…
Circular Radial NavbarRewamp UI · React
Animated DropdownSona UI · ReactA composable, accessible dropdown menu built on Base UI with controlled state, interruptible hover highlighting, and…
Add Cash DisclosureWatermelon UI · React
Context menuArc Library · ReactSecondary actions kept close to the selected object.
Context MenuUI Lab · ReactOpens at your cursor and grows from it.
Context menuHextaUI · ReactA menu of actions on right click or long press, with submenus, checkbox and radio items, and hold feedback on touch.
Blur Glide MenuMicroKit · ReactA nested menu whose steps blur before they glide aside, while the surface animates to the height of the step arriving.
Navbar MenuVelora UI · ReactHover-driven menu whose pill and panel morph between items.
With Linksv-particles · Svelte
Morph MenuSkecher UI · ReactA measured action menu that morphs between compact and expanded states with configurable directional movement.
Base Context MenuSora UI · ReactAn accessible context menu built on Base UI with smooth Motion spring scale and submenu slide animations.
Crypto OrbitZAYX · React Native
Liquid MenuLiquefy UI · ReactDropdown menu in liquid glass style. Menu suspenso em estilo vidro líquido.
Dropdown MenuEaseUI · ReactAction menu that opens from a trigger, flips upward when there is no room below, and supports a destructive item.
Glass Context MenuOpaline · ReactRight-click menu that springs from the cursor, with a row of round quick actions.
Context MenuReactFrame · ReactA right-click context menu with checkbox and radio items, nested submenus, viewport edge clamping and full keyboard…
Navbar MenuAceternity UI · React
Bubble MenuReact Bits · ReactNavigation bar of round bubbles (logo and toggle) that opens a full-screen overlay of pill-shaped menu links popping in.
Gooey Plus Menutransitions.dev · HTML/CSS
Context MenuAmicro Micro Transitions · React
AI Input SelectorKokonut UI · ReactAI chat input with a model menu, a separate Effort control, file chips you can drop or paste, a / command menu, and…
Context MenubeUI · ReactComposable context-menu primitives with a pointer-origin clip morph, a gliding active row, checkbox and radio choices…
DropdownFluid Functionalism · ReactDropdown menu with fluid hover, animated selection indicator, inline panel or triggered popup with collision-aware…
Create Menuuselayouts · ReactA Start Creating pill that springs open into a list of create actions.
Speed Dial FabKinetics · HTML/CSSActions fan out on a staggered spring
Floating MenuGreatUI · React
Context MenuNexvyn UI · ReactA right-click menu with proximity highlight and keyboard navigation.
Circular Context MenuSona UI · ReactAn edge-aware compound context menu that fans a small set of direct actions away from a selected object.
Collection Grid DisclosureWatermelon UI · React
Dropdown menuArc Library · ReactA focused list of actions anchored to a trigger.
Dropdown MenuUI Lab · ReactGrows out of its trigger, and press, drag, release picks an item like a native menu.
Dropdown menuHextaUI · ReactA menu of actions and options behind a button, with groups, submenus, checkbox and radio items, and shortcuts.
Base Dropdown MenuSora UI · ReactAn accessible dropdown menu built on Base UI with smooth Motion spring scale and submenu slide animations.
Glass MenuOpaline · ReactDropdown menu rendered on liquid glass.
Glass NavigationReactFrame · ReactA pill navbar that expands into a full panel of large nav links, a tagline, and social links, with a CTA button…
Card NavReact Bits · ReactExpandable navigation bar with card panels revealing nested links.
Menu Dropdowntransitions.dev · HTML/CSS
Submenu FlyoutAmicro Micro Transitions · React
Marking MenuKokonut UI · ReactA radial menu you hold to open or flick to pick blind, built with React and Motion.
DropdownFluid Functionalism · ReactDropdown menu with fluid hover, animated selection indicator, inline panel or triggered popup with collision-aware…
Flower Menuuselayouts · ReactA radial flower-style quick actions menu with staggered smooth motion.
Radial Gooey MenuGreatUI · React
Dropdown MenuNexvyn UI · ReactA popover action menu with a proximity-driven morphing highlight. The muted hover highlight springs between items as…
Circular Dock MenuSona UI · ReactA circular dock menu with controlled state, keyboard dismissal, item callbacks, outside-click handling, and…
Create New DisclosureWatermelon 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.
Overflow TabsUI Lab · ReactScrolls a long row of tabs, fading whichever edge still hides more.
MenubarHextaUI · ReactA desktop-style bar of menus with one highlight that slides between open menus and instant switching as you sweep…
MenuSora UI · ReactAnimated hamburger menu icon that smoothly morphs into a close (X) icon.
MenubarReactFrame · ReactA desktop-style app menubar with File/Edit/View-style dropdown menus, checkbox and radio items, submenus and full…
Flowing MenuReact Bits · ReactFull-height menu of large links; hovering one slides in a marquee strip of text and images from the edge the pointer…
Account MenuKokonut UI · ReactAn account card that morphs into its own menu, with account switching, status, theme and hold-to-sign-out.
Sidebar Workspace HeaderFluid Functionalism · ReactWorkspace brand row for a sidebar header: 20px tile on the rows' leading axis, name pinned to the 32px text axis…
Smooth Dropdownuselayouts · ReactA dropdown menu with premium layout transitions.
Gooey DropdownNexvyn UI · ReactA dropdown menu with a gooey SVG filter effect that morphs a trigger pill into the panel using spring physics and CSS…
Expanding ActionSona UI · ReactA compact action that transforms in place into a short set of related choices with accessible focus management.
Dropdown DisclosureWatermelon UI · React
Split buttonArc Library · ReactA primary action with a menu of nearby alternatives.
Floating Action MenuUI Lab · React
Navigation menuHextaUI · ReactSite navigation with dropdowns, or one full-width panel that stays open while its content slides between menus.
Radix Context MenuSora UI · ReactAn accessible context menu built on Radix UI with smooth Motion spring scale and submenu slide animations.
Infinite MenuReact Bits · ReactHorizontally looping menu effect that scrolls endlessly with seamless wrap.
Morph NavNexvyn UI · ReactA floating action button that morphs through states with SVG path-morphing trigger icon.
Fan ViewSona UI · ReactA fanned card menu with controlled state, item callbacks, keyboard dismissal, outside-click handling, and…
Filter DisclosureWatermelon UI · React
User menuArc Library · ReactYour account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.
Gooey MenuUI Lab · React
Radix Dropdown MenuSora UI · ReactAn accessible dropdown menu built on Radix UI with smooth Motion spring scale and submenu slide animations.
Staggered MenuReact Bits · ReactSide menu panel that slides in over coloured layers, with the links animating in one after another.
Nav MenuNexvyn UI · ReactA vertical navigation list with two-layer proximity highlight (active route + hover), weight-shift labels, and status…
Smart OverflowSona UI · ReactA priority-first responsive action group that moves lower-priority actions into an accessible three-dot menu as…
Filter Disclosure BaseWatermelon UI · React
SelectNexvyn UI · ReactA form select with a two-layer proximity highlight (selected accent tint + muted hover), drawn check animation, and a…
Prototype Circular Context MenuSona UI · React
Floating DisclosureWatermelon UI · React
Floating Disclosure BaseWatermelon UI · React
Gooey MenuWatermelon UI · React
Gooey Menu BaseWatermelon UI · React
Inline Disclosure MenuWatermelon UI · React
Inline Disclosure Menu BaseWatermelon UI · React
Invite DisclosureWatermelon UI · React
Layered Progressive DisclosureWatermelon UI · React
Radial NavWatermelon UI · React
Switch DisclosureWatermelon UI · React
Task Widget DisclosureWatermelon UI · React
Voice Chat DisclosureWatermelon UI · React
Libraries with Animated menu components
Related categories
- Menu Components
- React Menu Components
- Tailwind CSS Menu Components
- Svelte Menu Components
- shadcn/ui Menu Components
- Animated Navigation Components
- Animated Tabs Components
- Animated Navbar 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