Mobile Navigation

title: "Mobile Navigation — Hamburger and Tabs" weight: 18 description: "Learn how to design accessible mobile navigation patterns: hamburger menus with proper ARIA, bottom tab bars, focus management in navigation, and gestures that work with screen readers." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, mobile]

Mobile navigation patterns like hamburger menus and bottom tab bars must be accessible through programmatic labels, proper focus management, gesture alternatives, and correct ARIA states that work with mobile screen readers.

## What You'll Learn

You will implement accessible hamburger menus and tab bars, manage focus in mobile navigation, use correct ARIA attributes, and ensure navigation works with screen readers.

## Why It Matters

Navigation is the primary way users move through your site. Inaccessible navigation prevents users from finding content or completing tasks. Mobile navigation patterns have specific accessibility requirements.

## Real-World Use

A mobile site uses a hamburger menu that opens on tap. However, the menu button has no aria-label, the open state is not announced, and focus is not moved into the menu. Screen reader users cannot tell the menu opened or how to close it.

## Mobile Navigation Patterns

```mermaid
flowchart TD
  A[Mobile Navigation] --> B[Hamburger Menu]
  A --> C[Bottom Tab Bar]
  A --> D[Top Tab Bar]
  B --> E[Expandable overlay]
  C --> F[Persistent bottom bar]
  D --> G[Scrollable tabs]

Implementing Accessible Navigation

Each pattern has specific accessibility requirements.

<!-- Accessible hamburger menu -->
<header>
  <button
    class="hamburger"
    aria-label="Open menu"
    aria-expanded="false"
    aria-controls="main-menu"
    id="menu-btn"
  >
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
  </button>

  <nav id="main-menu" role="navigation" aria-label="Main menu" hidden>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

/* Hamburger menu styling */
.hamburger {
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  margin: 4px 0;
}

/* Bottom tab bar */
.tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid #ccc;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  min-height: 48px;
  cursor: pointer;
}

.tab-item[aria-selected="true"] {
  color: #0056b3;
  border-top: 2px solid #0056b3;
}

// Accessible hamburger menu toggle
const menuBtn = document.getElementById('menu-btn');
const menu = document.getElementById('main-menu');
let menuOpen = false;

menuBtn.addEventListener('click', () => {
  menuOpen = !menuOpen;
  menu.hidden = !menuOpen;
  menuBtn.setAttribute('aria-expanded', menuOpen);
  menuBtn.setAttribute('aria-label', menuOpen ? 'Close menu' : 'Open menu');

  if (menuOpen) {
    // Move focus to first menu item
    const firstLink = menu.querySelector('a');
    if (firstLink) firstLink.focus();
  } else {
    // Return focus to menu button
    menuBtn.focus();
  }
});

Common Mistakes

• Not labeling the hamburger menu button
• Not announcing menu state (open/closed)
• Not managing focus when menu opens or closes
• Using navigation that requires precise gestures
• Not providing a close mechanism for overlays
• Making tab bars too small to tap
• Not indicating the active tab visually

Practice and Challenge

Practice 1: Check hamburger menu button for aria-label. Practice 2: Verify aria-expanded is updated when menu toggles. Practice 3: Test focus movement when menu opens. Practice 4: Check tab bar touch target sizes. Practice 5: Test navigation with VoiceOver and TalkBack.

Challenge: Build an accessible mobile navigation system with both a hamburger menu (for primary links) and a bottom tab bar (for main sections). Ensure: proper ARIA attributes on all controls, focus management on open/close, touch targets at least 48px, keyboard support on desktop, and screen reader announcements for state changes.

FAQ

Mini Project

Create a mobile navigation pattern library with three patterns: hamburger menu, bottom tab bar, and top tabs. Each pattern must be fully accessible with proper ARIA attributes, focus management, touch targets, and screen reader support. Test each pattern on both iOS and Android.

What's Next

Mobile Focus Management covers focus management on mobile devices.