A positioning method that anchors elements relative to the browser viewport, keeping them visible during scrolling. Fixed elements are useful for sticky navigation, floating action buttons, and persistent calls to action. Use fixed positioning sparingly to avoid blocking content and reducing usable space.

A CSS layout system designed for one-dimensional layouts, distributing space among items in rows or columns. Flexbox excels at navigation bars, card rows, and any content that should grow or shrink responsively. Framer's auto layout is powered by flexbox concepts, making these layouts visual and intuitive.

The top section of a webpage, typically containing the logo, main navigation, and key actions like sign-in buttons. Headers establish brand identity and provide consistent navigation across all pages. Design headers to be useful without overwhelming—users should find what they need without excessive visual competition.

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.

Animated scrolling that eases between positions rather than jumping instantly, creating smoother navigation. Smooth scroll improves user experience when jumping to anchors or returning to top. Ensure smooth scroll doesn't interfere with user scroll input.

A hybrid positioning method where elements behave normally until reaching a scroll threshold, then fix in place. Sticky positioning creates headers that stay visible during scrolling within their container. Use sticky for navigation, sidebar elements, and persistent calls to action.

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.

Links and content in the page footer providing secondary navigation, legal links, and supplementary information. Footers catch users who've scrolled through all content and need next steps. Include popular pages, contact information, and trust signals like security badges.

The primary navigation links typically placed in the site header, providing access to main sections. Header navigation should prioritize the most important destinations while remaining uncluttered. Design mobile variations carefully, often using hamburger menus to save space.

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 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 vertical navigation or content panel typically positioned at the page edge, common in dashboards and documentation. Sidebars provide persistent access to navigation while leaving room for main content. Design sidebars to collapse gracefully on smaller screens.

A web application that loads once and dynamically updates content without full page reloads. SPAs provide app-like experiences with smooth transitions and responsive interactions. Framer supports SPA-style navigation with page transitions.

A small preview image representing larger content, commonly used in galleries, lists, and navigation. Thumbnails help users identify content quickly without loading full-size media. Size thumbnails appropriately and use consistent aspect ratios.

Animated transitions between page or state views that preserve continuity as content changes. View transitions can make navigation feel smoother and reduce abrupt visual jumps.