Dropdown Menu

An accessible dropdown menu with unlimited nested submenus, full keyboard navigation, smart viewport positioning, and blur fade animations.

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. Features 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 Navigation Types Item — standard clickable menu item with optional link Separator — visual divider for grouping related items Nested — expandable item with unlimited child submenu items Property Controls 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 Technical Details 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 Default Menu 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

Nested dropdown menu with keyboard nav