Navigation
Mobile App Header
Mobile App Header serves as the top navigation area of an application, providing users with key contextual information, navigation controls and quick access to important actions while ensuring a consistent and intuitive user experience.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features8 checks
- Root element uses role="banner" landmark for assistive navigation
- Status bar is aria-hidden, decorative device information
- National Emblem rendered with descriptive alt text
- Back button labelled "Go back" via aria-label
- Hamburger button labelled "Open navigation menu" via aria-label
- Right action buttons each have an aria-label describing their function
- Action button toolbar annotated with role="toolbar"
- Brand fill colour (#4a2bc2 on white) meets WCAG AA contrast (5.1:1)
When to use this component
✓Do's
- •A small-screen view needs persistent context about where the user is
- •Back, menu, or close controls must stay reachable within thumb range
- •One or two high-priority actions belong at the top of the screen
- •You need a consistent top bar across every screen of a mobile service
✗Don'ts
- •You are on desktop, use Navbar which is built for wider viewports
- •More than two or three actions are needed, move the overflow into a menu
- •The title would be truncated to the point of ambiguity, shorten the page title instead
- •It would hide critical content on small screens, keep the header shallow
Do's and Don'ts
✓ Do's
Show the National Emblem consistently on the home screen of all government service apps. It establishes trust and confirms the app's official status to citizens.
✗ Don'ts
Don't place more than 3 action icons on the right. When you need more actions, consolidate them into an overflow menu (⋯) to keep the header uncluttered.