An accessible dropdown menu with unlimited nested submenus, full keyboard navigation, smart viewport positioning, and blur fade animations. Every item supports links, separators, and nested children. Built for navigation menus, settings panels, account menus, and any interface that needs a hierarchical menu structure with polished interactions.
Unlimited nested submenu levels
Full keyboard navigation — arrow keys, enter, space, escape
Smart positioning — opens up or down based on available viewport space
Nested menus open left or right based on viewport space automatically
Blur and fade-in animation on menu open with staggered items
AnimatePresence for smooth exit animations
Toggle animations on or off
Every item supports optional URL link — opens in new tab
Separator item type for visual grouping
Nested item type with unlimited children
Visual indicator for items with submenus
Full ARIA role implementation — menu and menuitem
Focus management with visual focus indicators
Screen reader friendly semantic HTML
Dynamic sizing — adapts to font size automatically
Dark mode ready — default dark theme
No dependencies beyond Framer Motion
Item — standard clickable menu item with optional link
Separator — visual divider for grouping related items
Nested — expandable item with unlimited child submenu items
Content
Trigger Label — menu button text
Menu Items — array of items · label, type, link, nested items per item
Styling
Background — menu background color
Text Color — all item text color
Hover Color — item hover background color
Border Color — menu border color
Separator Color — divider line color
Border Radius — corner roundness (0–20px)
Typography
Trigger Font — menu button font controls
Item Font — menu item font controls
Behavior
Animations — toggle blur fade animations on or off
Framer Motion with AnimatePresence for open and exit animations
Three interaction modes — keyboard, mouse, none — prevents focus conflicts
startTransition for smooth non-blocking state updates
useMemo for dynamic size calculations
useCallback memoization prevents unnecessary re-renders
useRef for focus management and DOM position detection
SSR-safe window and document guards
Proper cleanup of event listeners on unmount
Comes pre-configured with a comprehensive example — My Account, Preferences, Messages, Appearance submenu, Region submenu, Subscription, Share submenu, Documentation and Sign Out. All items include example links ready to customize.
SEO Keywords
framer dropdown menu · framer nested menu · framer navigation menu · framer menu component · framer accessible menu · framer keyboard navigation · framer submenu · framer navigation component · framer dropdown component · framer account menu · framer settings menu · framer animated menu · framer aria menu · framer code component · framer nav component
Hamim Reza
