App Navigation Patterns: Tab Bar vs Hamburger vs Bottom Sheet

Pattern 1: Tab Bar Navigation

The tab bar is a row of icons at the bottom of the screen, each linking to a top-level section of the app. Both Apple’s Human Interface Guidelines and Google Material Design recommend tab bars for primary navigation in mobile apps with 3 to 5 destinations.

Why Tab Bars Work

• Always visible: Users see every primary section at a glance
• Thumb-friendly: Bottom placement matches natural one-handed grip
• Predictable: Users know where they are and how to switch
• Encourages exploration: Users tap sections they would not have searched for

When NOT to Use a Tab Bar

• You have more than 5 top-level sections (it gets cramped)
• Your app is a single-task tool (no need for navigation)
• You target tablets or desktops primarily (use a sidebar instead)

Tab Bar Examples in Real Apps

Instagram uses 5 tabs: Home, Search, Reels, Shop, Profile. YouTube uses 5: Home, Shorts, Subscriptions, You, Library. Spotify uses 4: Home, Search, Your Library, Premium. The pattern is consistent because it works. Tab bars also have a measurable impact on retention, which we cover in detail in our app retention strategies guide.

Pattern 2: Hamburger Menu (Drawer)

The hamburger menu is the three-line icon usually placed in the top-left corner. Tapping it slides a panel out from the side with navigation options. Once standard for mobile apps, the hamburger menu has fallen out of favor for primary navigation in recent years.

The Problem with Hamburger Menus

The convenience of hiding navigation in a single icon comes at a cost. Multiple usability studies have shown:

• Users discover features 30 to 50% less often when they live in a hamburger menu
• Engagement with secondary features drops significantly
• First-time users miss key navigation entirely
• Hidden navigation reduces product discovery and feature adoption

When Hamburger Menus Still Work

• For settings, account, and admin pages where frequency of use is low
• For tablet apps with very deep navigation hierarchies
• As a secondary menu alongside a tab bar (combine the two patterns)
• For productivity tools where users will spend time learning the interface

Hamburger Menu Done Right

Gmail keeps the hamburger menu but pairs it with a clear primary action (compose). Slack uses a sidebar drawer for channels but pulls direct messages and threads into more visible tabs. The lesson is to use hamburger menus for what they are good at (depth) and other patterns for what they are not (engagement and discovery).

Pattern 3: Bottom Sheet Navigation

A bottom sheet is a panel that slides up from the bottom of the screen, usually to reveal options, filters, or secondary content. Unlike the hamburger menu, the bottom sheet is contextual: it appears in response to a specific action and disappears when dismissed.

Three Types of Bottom Sheets

• Modal bottom sheets: Block other interaction until dismissed (e.g. confirming a payment)
• Persistent bottom sheets: Stay visible at the bottom but can be expanded (e.g. Google Maps directions)
• Expanding bottom sheets: Drag up to see more, drag down to dismiss (e.g. Spotify’s now-playing tray)

When Bottom Sheets Win

• Filtering search results without leaving the page
• Showing detail without losing context (e.g. tap a pin on a map)
• Quick actions like sharing, saving, or adding to cart
• Music or video controls that should persist across screens

Common Mistakes With Bottom Sheets

• Using them for primary navigation (they should support, not replace, the tab bar)
• Stacking multiple bottom sheets on top of each other
• Putting irreversible actions in non-modal sheets
• Making them dismiss in unexpected ways (always allow tap outside or swipe down)

Pattern 4: Floating Action Button (FAB)

The Floating Action Button is a circular button that floats above the content, typically in the bottom-right corner. Introduced by Google Material Design, the FAB is meant for the single most important action on a screen.

FAB Best Practices

• One FAB per screen, no exceptions
• Must represent the user’s primary intent on that screen
• Use a clear, recognizable icon (plus sign, pencil, camera)
• Optional label on key screens for clarity (“New message”)
• Hide on scroll if it blocks important content

When NOT to Use a FAB

• If you are building for iOS only (it does not match Apple’s design language as well)
• If your screen has no clear primary action
• If the action is destructive or irreversible (use a confirm modal instead)
• If a tab bar already covers the action

Real Examples of FABs Done Well

Gmail uses a FAB for “Compose” (the single most important user intent in an inbox). Twitter uses a FAB for “Post” (the platform’s defining action). Google Photos uses a FAB for “Search” (the main way users find photos). Notice the pattern: each FAB represents the action the platform exists for.

Pattern 5: Sidebar / Drawer Navigation

A sidebar is a vertical column of navigation options on the left side of the screen, typically used in tablet or desktop apps. It is similar to a hamburger drawer but always visible, taking up persistent screen space in exchange for always-on visibility.

When Sidebars Win

• For tablet and desktop layouts where horizontal space is plentiful
• When you have 6 or more equally-important destinations
• For productivity apps where users spend time learning the interface (Slack, Notion, Asana)
• For enterprise apps with deeply nested navigation

Mobile Sidebar Pitfalls

On phones, sidebars take up too much screen real estate. Most successful mobile apps use a tab bar for primary navigation and reserve sidebars for tablet versions. If you build with a no-code platform like Appy Pie AI, the platform automatically handles responsive navigation, switching from a tab bar on phones to a sidebar layout on tablets.

Decision Framework: Which Navigation Pattern Should You Use?

Pick the pattern that matches your app’s structure. Most apps use 2 or 3 patterns together (e.g. tab bar + bottom sheet + FAB). Use this checklist:

6 Navigation Mistakes That Quietly Kill Retention

These are the most common navigation issues we see in apps that struggle with engagement. Each one has a simple fix.

1. Cramming 6+ items into a tab bar

Five tabs is the upper limit. Six tabs become unreadable on smaller phones, and users stop using the ones they cannot easily distinguish. Either combine sections (e.g. merge Notifications and Activity into one) or move overflow to the Profile tab. This is one of the silent killers we cover in our breakdown of why apps stop getting downloads.

2. Hiding the most important feature in a hamburger menu

If your app’s main feature lives behind three lines, users will never find it. Move it to the tab bar, even if it means demoting another section.

3. Using icons without labels

Icons alone are guesswork. Always pair tab bar icons with short labels (Home, Search, Cart). The space cost is small. The clarity gain is huge.

4. Inconsistent back button behavior

If tapping the back button does different things on different screens, users get lost. Follow the platform standard: iOS expects a left-arrow back button at the top-left. Android uses the system back gesture.

5. No clear “home” or starting point

Every app needs a recognizable home screen the user can return to. Without it, users feel lost and abandon the app. The first tab in your tab bar should always be Home or Dashboard.

6. Disappearing navigation when scrolling

Animations that hide the tab bar on scroll feel clever but reduce navigation availability when users want to switch. Either keep the tab bar visible or test carefully before hiding it.

Combining Navigation Patterns Like the Pros

The best apps do not pick one pattern. They combine 2 or 3 to handle different jobs. Here is how the most-used apps stack their navigation.

Instagram (Tab Bar + Bottom Sheet + FAB-style centered button)

• Tab bar with 5 destinations (Home, Search, Reels, Shop, Profile)
• Centered camera button works like a FAB for the platform’s defining action
• Bottom sheets for filters, sharing, and comment actions

Google Maps (Tab Bar + Persistent Bottom Sheet)

• Tab bar at the bottom with 5 sections (Explore, Go, Saved, Contribute, Updates)
• Persistent bottom sheet for search and directions, expandable to full screen
• FAB for “Start navigation” once a route is selected

Spotify (Tab Bar + Persistent Mini Player + Bottom Sheet)

• Tab bar with 4 destinations (Home, Search, Your Library, Premium)
• Mini player above the tab bar that expands to a bottom sheet
• Modal bottom sheet for share, add to playlist, and queue management

The pattern across all three: tab bar for primary navigation, bottom sheet for context-specific actions, FAB or central button for one defining action. This is the modern mobile navigation playbook.

How Appy Pie AI App Builder Sets Up Navigation

If you are using a no-code platform, you do not have to design navigation from scratch. Appy Pie AI AI App Generator automatically picks the right navigation pattern based on your app description and selected features.

What this looks like in practice

When you describe your app to the AI, it generates a structure with built-in navigation. For example, when we typed “Build a salon app with service listings, staff profiles, appointment booking, payments, and notifications,” the AI suggested 4 core features and built an app with a bottom tab bar layout.

Once the app is generated, you can fine-tune any section using the editor’s AI assistant. Tap any element of the navigation or content, and the “Edit with AI” tooltip lets you change layout or copy in plain English.

The Live App Preview With Tab Bar Navigation

Inside the editor, you see your app in real time with the navigation pattern in place. Below is what a salon app looks like with bottom tab navigation, plus a QR code that lets you scan and test the navigation on your real phone instantly.

Customizing Navigation in the Editor

Once your app is generated, you can customize navigation visually. Add new tabs, reorder them, change icons, or use the “Edit with AI” feature to ask for navigation changes in plain English.

You can also manage features individually from the sidebar. Each feature has its own settings, and you can decide whether it appears in the tab bar, drawer, or as a context action.