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.

An interactive element that collects user input through fields like text boxes, dropdowns, and checkboxes. Well-designed forms balance collecting necessary information with respecting user time and effort. Keep forms short, use clear labels, provide helpful validation messages, and consider progressive disclosure for complex forms.

A dialog overlay that requires user attention before interacting with underlying content, used for alerts, forms, or focused tasks. Modals should have clear purposes and obvious dismissal methods—don't trap users in unexpected dialogs. In Framer, build modals as overlay components with appropriate entrance and exit animations.

The system of links and menus that helps users find content and move through a website. Good navigation is consistent, clearly labeled, and reflects user mental models about site structure. Test navigation with real users to ensure your labels and organization make sense to your audience.

A navigation bar containing primary site links, typically fixed at the top of the page for constant access. Navbars establish site identity and provide consistent wayfinding across pages. Design navbars to be useful without overwhelming—prioritize the most important links.

An interactive element allowing users to switch between content panels without leaving the page, saving space and organizing related content. Tabs work best for equally important parallel content, not sequential steps. Ensure tab interfaces are keyboard accessible with proper ARIA roles.

A switch-style control for binary choices, indicating on/off or enabled/disabled states with immediate effect. Toggles differ from checkboxes in that they typically apply changes immediately rather than requiring a submit action. Use clear labeling so users understand what enabled and disabled states mean.

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.

A navigation element showing the user's location within a site hierarchy, typically displayed as a trail of linked page names. Breadcrumbs improve navigation by helping users understand site structure and quickly jump to parent sections. They also benefit SEO by helping search engines understand page relationships and providing rich snippet opportunities.

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.

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.

An overlay that displays enlarged images or media while dimming the background, focusing attention on the content. Lightboxes are ideal for galleries and detailed image viewing without leaving the page. Ensure lightboxes are keyboard accessible with clear close mechanisms.

A rotating display of multiple pieces of content within a single space, allowing users to navigate through items using arrows or swipe gestures. While carousels save space, studies show users often miss content beyond the first slide—consider whether a grid might be more effective. If using carousels, ensure clear navigation indicators and consider auto-play carefully.

A prominently styled button designed to attract clicks and drive users toward a conversion goal. Effective CTA buttons use contrasting colors, clear action-oriented text, and strategic placement. Test variations of your CTA—even small changes to wording or color can significantly impact click-through rates.

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.

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.

Navigation that divides content across multiple numbered pages, used for long lists or archives. Pagination gives users control and provides clear position within content but requires clicks to progress. Consider whether infinite scroll or load-more buttons might provide a better experience for your use case.

An overlay window that appears on top of page content, often used for promotions, email captures, or important notices. Pop-ups can be effective but easily frustrate users if poorly timed or hard to dismiss. Consider alternative placements and respect user preferences.

An input field where users can search for content within a website, essential for content-heavy sites. Search functionality helps users find specific content quickly without browsing navigation. Implement effective search with relevant results and helpful empty states.

A self-contained interactive element that provides specific functionality, often embeddable from third-party services. Widgets extend site capabilities without custom development—chat widgets, calendars, and forms are common examples. Consider performance impact when adding widgets and lazy load when possible.

A collection of reusable components, guidelines, and standards that ensure consistency across a product and team. Design systems speed up development, maintain brand coherence, and enable designers and developers to speak the same language. Framer supports design systems through components, variables, and styles.

A methodology for building design systems from smallest elements (atoms) up through molecules, organisms, templates, and pages. This approach creates reusable, composable components that scale efficiently across large projects. Framer's component system naturally supports atomic design principles with nested components.

A linked copy of a component that inherits properties from its main component while allowing local overrides. Instances update automatically when the main component changes, maintaining consistency at scale. Override specific properties on instances when variations are needed.