What is Bottom Navigation?

Bottom navigation is a bar at the bottom of mobile screens with 3-5 tabs representing the app's main sections. Each tab has an icon and label, and users can switch between sections with one tap. It's the most thumb-friendly navigation pattern for mobile apps because the buttons are within easy reach. Common in mobile-first consumer apps.

When Should You Use This?

Use bottom navigation for mobile apps with 3-5 main sections that users switch between frequently (like Instagram: Home, Search, Reels, Shop, Profile). It's ideal when all sections are equally important and users need quick access. Avoid if you have more than 5 sections or if your app is primarily desktop/web.

Common Mistakes to Avoid

• •Too many tabs—limit to 5, ideally 3-4 for best usability
• •Using on desktop web—bottom nav is mobile-only, use top nav or sidebar for desktop
• •Inconsistent labels—some tabs with text, some without creates confusion
• •No active state indicator—highlight current tab clearly
• •Hiding on scroll—defeats the purpose of persistent, thumb-friendly navigation

Real-World Examples

• •Instagram—Home, Search, Create, Reels, Profile (5 tabs)
• •Twitter—Home, Search, Notifications, Messages (4 tabs with center action)
• •Airbnb—Explore, Wishlists, Trips, Inbox, Profile
• •Spotify—Home, Search, Your Library (simple 3-tab navigation)