Dropdown Menu

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