Navigation UI Design Patterns & Examples

Navigation patterns from top apps — tab bars, side menus, bottom sheets, and more.

What are the best mobile and web navigation patterns?

The best navigation patterns match the platform: bottom tab bars for mobile apps with 3-5 destinations, and side rails or top navigation for desktop and tablet. Strong navigation stays visible, thumb-reachable on mobile, and avoids hiding core destinations behind a hamburger menu.

Use a bottom tab bar with 3-5 destinations for most mobile apps.
Reserve side menus for tablet and desktop layouts with more screen space.
Pick one primary navigation pattern per screen instead of combining tab bars and side menus.

Apps with Navigation screens

15 apps

Frequently asked questions

What is the best mobile navigation pattern?

Bottom tab bars with 3–5 destinations work for most mobile apps. They are thumb-reachable, always visible, and give users a clear mental model. Avoid hamburger menus as the primary navigation — they hide destinations.

Tab bar vs side menu — which is better?

Tab bars win on mobile because they are visible and thumb-friendly. Side menus work on tablet and desktop where there is room for a persistent rail. Never use both on the same screen — pick one primary navigation surface.

Explore more UI patterns

Onboarding Login Checkout Empty States Search Settings Dashboard Profile Notifications Paywall Pricing Sign Up Loading Error States