Wayfinding controls—sidebars, command palettes, pagination, breadcrumbs. 10 patterns for efficient product navigation.
Navigation patterns help users move through your product efficiently. These 10 patterns include sidebar navigation, bottom nav, hamburger menus, command palettes, FABs, pagination, context menus, steppers, anchor links, and skip links. Choose based on content depth (shallow = tabs, deep = sidebar), device (mobile = bottom nav, desktop = sidebar), and user expertise (power users = keyboard shortcuts).
Sidebar navigation is a vertical menu that provides persistent access to main navigation. Learn when to use sidebars vs. top navigation in your app.
Bottom navigation is a mobile UI pattern with 3-5 tabs at the bottom of the screen. Learn when to use bottom nav for mobile-first apps.
The hamburger menu (☰) is a collapsible navigation icon common in mobile interfaces. Learn when to use hamburger menus and better alternatives.
Command palette is a keyboard-driven interface for quick actions (Cmd+K). Learn how to add command palettes to power user workflows.
FAB (Floating Action Button) is a circular button for primary actions. Learn when to use FABs in mobile interfaces and common pitfalls.
Pagination breaks content into pages (1, 2, 3...). Learn when to use pagination vs. infinite scroll, and pagination best practices.
Context menus show relevant actions on right-click or long-press. Learn when to use context menus and mobile alternatives.
Steppers (wizards) guide users through multi-step processes. Learn when to use step-by-step flows vs. single-page forms.
Anchor links let users jump to sections on long pages. Learn when to use anchor navigation and smooth scrolling best practices.
Skip links let keyboard users jump past repetitive navigation. Learn how to implement skip links for web accessibility (WCAG).