The ability to navigate and interact with a website using only keyboard controls, essential for accessibility. Test tab order, focus visibility, and keyboard-activated interactions to ensure full functionality. Many users rely on keyboard navigation due to motor disabilities or preference.

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.

A distinct document within a website with its own URL, content, and purpose in the site structure. Each page should have clear purpose, proper metadata, and thoughtful internal linking. Organize pages logically and limit depth to keep content discoverable.

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.

The tabindex attribute controls whether an element can receive keyboard focus and in what order. Use 0 to include an element in natural tab order and -1 for programmatic focus only. Avoid positive values because they create confusing navigation order.

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. See Make Responsive Dropdown Menus From Scratch.

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.

A clickable connection between pages or resources, the fundamental navigation mechanism of the web. Hyperlinks should have descriptive text indicating their destination rather than generic ‘click here’ labels. Style links consistently with clear visual distinction from surrounding text.

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.

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.

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 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 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.

In Framer, instant navigation helps multi-page sites feel faster by reducing delay between clicks and page changes, especially when paired with preloading and optimized routes.

In Framer, route prefetching helps visitors move between pages with less waiting by preparing linked destinations before they are clicked.