Mobile Navigation
Last updated
Was this helpful?
Last updated
Was this helpful?
The Mobile Navigation component provides a user-friendly, accessible menu system that helps users navigate websites on mobile devices while maintaining hierarchy and context.
Use the Mobile Navigation component when:
Creating responsive websites or applications that need to work effectively on mobile devices
You have complex navigation structures that need to be condensed for smaller screens
Multiple levels of navigation need to be preserved in a space-efficient manner
Users need clear contextual information about their location in the site hierarchy
Do not use the Mobile Navigation component when:
The website has minimal navigation needs that can be easily accommodated with a simple horizontal menu
A desktop-focused design doesn't require responsive adaptation for mobile devices
You're developing a progressive web app with its own custom navigation patterns
The navigation hierarchy is so flat that a simpler solution would be more appropriate
Clear hierarchy representation: Mobile navigation should clearly display the hierarchy of the site, with distinct tiers for main navigation, subcategories, and detail pages.
Contextual cues: Include visual and textual indicators to help users understand where they are in the navigation structure, such as headings for each navigation level.
Efficient back navigation: Provide consistent "Back" or "Close" options that allow users to move up the hierarchy efficiently.
Visible active states: Clearly indicate which navigation item is currently active or selected to help users maintain awareness of their location.
Logical grouping: Group related navigation items together to aid understanding and create a more intuitive information architecture.
Minimise scrolling: Limit the number of items at each level to reduce excessive scrolling, particularly on smaller screens.
Consistent positioning: Place navigation controls in consistent locations to build user familiarity and improve usability.
Touch-friendly targets: Ensure all interactive elements are large enough for comfortable touch interaction (at least 44×44px).
Visual distinction between levels: Use clear visual cues to distinguish between different navigation levels.
Animated transitions: Implement smooth transitions between navigation states to help users understand the relationship between levels.
Main menu (First tier) A full-screen overlay presenting the primary navigation options, with utility links such as "Help" and "Contact us" at the bottom.
Secondary level (Second tier) Shows categories under a specific parent navigation item, displaying a header with the parent name for context.
Tertiary level (Third tier) Presents specific articles or pages within a selected category with appropriate contextual heading.
Descendant Mobile Navigation Shows parent and child links in default and pressed states for different interaction patterns.
Based on the 'CivicTheme v1.7.0 Accessibility Assessments' file, the Mobile Navigation component meets WCAG 2.2 accessibility guidelines with the following results:
Summary of accessibility test results:
Info and Relationships (Level A)
Passed
Resize text (Level AA)
Passed
Keyboard (Level A)
Passed
Keyboard Trap (Level A)
Passed
Focus Order (Level A)
Passed
Visual Focus Indicator (Level AA)
Passed
On Focus behavior (Level A)
Passed
On Input behavior (Level A)
Passed
Consistent identification (Level AA)
Passed
The component includes a visible heading above each navigation menu to provide context, and the Close button is positioned in the top right for consistent placement.
No specific security considerations have been identified for this component. Standard web application security practices should be followed when implementing the component.
The Mobile Navigation component is widely used across government, corporate, and educational sites that implement CivicTheme. As this is a core navigational component, it appears on virtually all CivicTheme implementations.
This component has been modelled after the Main Nav component in the former Australian Government Design System (AGDS). As described in the 'CivicTheme Australian Government GOLD Design System Compliance Statements' document, CivicTheme has uplifted this component in the following ways:
Included a heading above each navigation menu (i.e., "Main Menu" or the category name)
Moved the Close button to the top right of the mobile navigation
Added a secondary "utility" navigation fixed at the bottom to accommodate secondary information
Added right arrow icons by default for menu items that have child pages
For deeper-level navigation, added a "back arrow" icon to allow users to navigate back one category
These uplifts were based on user research findings indicating that:
The heading helps provide greater context on what menu/category the user had just clicked
The Close button position reduces visual noise on the left side of navigation
Right arrow icons communicate to users that they will navigate to the next level down
Back arrow icons provide clear navigation cues for multi-level information architecture
★★★★☆ Confidence rating = High (Informed by research)
The Mobile Navigation component has been tested in multiple rounds of usability testing across different CivicTheme implementations. Key findings include:
Users appreciate the clear structure and visual hierarchy of the navigation system
The consistent positioning of "Back" and "Close" buttons creates predictable navigation patterns
The use of arrow icons effectively communicates the direction of navigation
Most users intuitively understand the multi-tiered approach and can navigate effectively between levels
Some users initially looked for a hamburger menu icon before recognizing the navigation pattern
Research has shown that mobile navigation is critical to the overall user experience on government sites, especially for task-focused visitors who rely on quick access to specific sections. The component meets the Digital Service Standard requirements for connecting services and building trust in design through its consistent and intuitive interface.
Performance on older devices: Animations and transitions may cause slight lag on older mobile devices with limited processing power
Deep navigation challenges: When sites have very deep hierarchies (4+ levels), the pattern can become confusing for users who may lose track of their location
Utility section visibility: The utility links at the bottom can sometimes be overlooked by users focusing on the primary navigation items
Back button expectations: Some users expect the device's back button to navigate between levels rather than using the component's built-in navigation controls
Further research would be beneficial in the following areas:
How users with cognitive impairments navigate multi-level mobile navigation structures
Optimal number of items per level before scrolling becomes problematic
Effectiveness of including search functionality within the mobile navigation component
User preferences for navigating between separate but related sections of a site
To help make this component more useful and up-to-date, you can:
Contribute to our Mobile Navigation component discussion
Submit your user research findings to help improve the Mobile Navigation component
Propose a change to the Mobile Navigation component
Storybook
GitHub
Nielsen Norman Group. (2016). Mobile Navigation Patterns. https://www.nngroup.com/articles/mobile-navigation-patterns/
Baymard Institute. (2021). Mobile E-Commerce Navigation Usability. https://baymard.com/research/mobile-e-commerce-navigation
Digital Transformation Agency. (2023). Digital Service Standard. https://www.dta.gov.au/help-and-advice/digital-service-standard
1.8.0
Jul 2024
Renamed to "Mobile Navigation" from "Mobile Nav" for consistency
1.7.0
Mar 2024
Improved accessibility to meet WCAG 2.2 requirements
1.6.0
Nov 2023
Added consistent help section in main menu
1.5.0
Jun 2023
Enhanced navigation depth indicators
If you have a question about the CivicTheme design system or need our help, visit the Getting Help page for guidance.