Bottom Navigation

Bottom navigation provides persistent access to primary destinations by placing navigation controls at the bottom of mobile screens within thumb reach. iOS implements this through tab bars while Android uses bottom navigation bars following Material Design specifications. Cross-platform design systems must address the subtle differences between these implementations while maintaining consistent navigation architecture.

What Is Bottom Navigation

Bottom navigation positions the most important application destinations in a horizontal bar at screen bottom. This placement optimizes for one-handed mobile use, keeping navigation within natural thumb range. Typically three to five destinations appear, each represented by an icon with optional label.

Bottom navigation remains visible across navigation within each destination’s content hierarchy. Users can switch between top-level destinations without losing their place within each section. This persistence provides constant wayfinding and quick access to primary features.

The pattern emerged as mobile screens grew larger, making top-positioned navigation harder to reach. Both Apple and Google now recommend bottom navigation as a primary pattern, though implementation details differ between platforms.

How Bottom Navigation Works

iOS tab bars use a specific visual language. Icons sit above labels in a light or dark bar that adapts to system appearance. The selected state typically uses a tint color while unselected items appear in gray. System tab bar items (like “Favorites” or “More”) have predefined icons and behaviors.

iOS Tab Bar Specifications:
- Height: 49pt (83pt with home indicator)
- Maximum 5 items (more shows "More" item)
- Icons: SF Symbols preferred, 25pt nominal
- Labels: Below icons, can hide in compact height
- Selected: Tint color
- Unselected: Gray

Android Bottom Navigation Specifications:
- Height: 80dp (with labels), 56dp (icons only)
- Maximum 5 destinations recommended
- Icons: 24dp, Material icons preferred
- Labels: Show or hide based on configuration
- Selected: Primary color, larger icon
- Unselected: On-surface color

Android bottom navigation bars follow Material Design specifications. Icons can appear with always-visible labels, selected-only labels, or no labels. Selection state changes icon color and may animate icon scale. The bar can hide on scroll to maximize content space.

Badge indicators notify users of updates within destinations. iOS badges appear as red circles with numbers. Android badges can be dots or numbered. Badge management requires clearing when users visit destinations.

Navigation state management determines what happens when users tap destinations. Tapping the current destination might scroll to top, reset navigation within that section, or do nothing. These behaviors should be consistent and match user expectations.

Key Considerations

• Safe area handling accounts for home indicators and notches
• Icon design must work at small sizes with clear distinction
• Active state must be visually distinct from inactive
• Badge overflow handling for large numbers
• Landscape orientation may require different layouts
• Accessibility requires clear labels for screen readers

Common Questions

How many items should bottom navigation contain?

Three to five items represents the recommended range across both platforms. Fewer than three may not justify bottom navigation versus alternative patterns. More than five creates crowding and reduces tap target size.

Four items often works best visually, providing symmetry and adequate space. Three items can feel sparse. Five items approaches density limits, especially on smaller phones.

iOS provides a “More” item pattern for applications needing more destinations, opening a list view for additional navigation. Android does not have this built-in pattern, suggesting navigation drawers for overflow.

The most important destinations should occupy bottom navigation. Secondary features belong in other navigation mechanisms like drawers, profile menus, or search.

Should labels always be visible or only on selection?

iOS tab bars always show labels in regular height contexts. Labels may hide in compact height (landscape phones). This consistent labeling helps users understand destination meaning.

Android offers more flexibility. Labels can be always visible, visible only for selected item, or hidden entirely. Material Design recommends always showing labels for clarity, though icon-only configurations save space.

Accessibility considerations favor always-visible labels. Labels help users with cognitive disabilities understand destinations. Screen readers announce labels regardless of visibility, but visual users benefit from persistent labels.

New users benefit most from visible labels. If an application targets experienced users who will learn icon meanings, hiding labels may be acceptable. Applications targeting broad audiences should prefer visible labels.

How do design systems handle bottom navigation with keyboards?

Virtual keyboard appearance on mobile can overlap bottom navigation. Some applications hide bottom navigation when keyboards appear. Others maintain visibility, accepting that users may need to dismiss keyboards to navigate.

Input-focused screens may not need bottom navigation visible during data entry. Hiding navigation simplifies the interface during focused tasks.

Design systems should specify keyboard interaction behavior. Clear specifications prevent inconsistent behavior across different forms and input contexts.

Testing with actual keyboards verifies that navigation remains accessible when needed and does not interfere with input when keyboards are active.

Summary

Bottom navigation places primary destinations within thumb reach through persistent bars at screen bottom. iOS tab bars and Android bottom navigation bars share concepts but differ in implementation details. Design systems should specify item counts, label visibility, badge behavior, and keyboard interaction to ensure consistent bottom navigation implementation across platforms.