Dropdown Menu

A navigation pattern where hovering or clicking reveals a submenu of additional links or options. Dropdown menus organize complex navigation hierarchies while keeping the main navigation clean. Test timing and hover zones carefully—frustrating dropdowns that close unexpectedly harm user experience. See Make Responsive Dropdown Menus From Scratch.

Related terms

Related terms

  • Dropdown

    Components

    An interactive element that reveals a list of options when clicked, saving space while providing multiple choices. Dropdowns work best with 5-15 options—fewer suggests radio buttons, more suggests search or typeahead. Ensure dropdown menus are keyboard accessible and work well on touch devices.

  • Tooltip

    Components

    A small text popup that appears when hovering over an element, providing additional context or explanation. Tooltips should contain brief, helpful information that isn't essential for basic usage. Remember tooltips don't work on touch devices—don't hide critical information in them.

  • Hamburger Menu

    Components

    A navigation icon consisting of three horizontal lines that reveals a hidden menu when tapped, standard on mobile devices. While space-efficient, hamburger menus hide navigation and reduce discoverability—consider keeping key links visible. In Framer, create hamburger menus with component variants that animate between open and closed states.

  • Mega Menu

    Components

    An expanded dropdown navigation revealing multiple categories, links, and sometimes images in a large panel. Mega menus work well for sites with extensive content hierarchies like e-commerce or documentation. Design mega menus carefully to avoid overwhelming users with too many options.

  • Navigation Menu

    Components

    A collection of links enabling users to move between pages and sections of a website. Navigation menus should be consistent, clearly labeled, and organized logically based on user mental models. Test navigation with users to ensure labels and structure are intuitive.

  • Workspace

    General

    A shared environment in Framer where teams organize projects, manage billing, and control member access. Workspaces make it easier to collaborate across multiple sites with centralized settings and permissions. See Organizations, Workspaces, and Folders.

  • Overlays

    Interaction

    Framer overlays let designers build interactive layers that appear above or beside content, such as navigation drawers, tooltips, signup modals, and dropdown menus.