CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
    • Atoms
      • Button
      • Chip
      • Content link
      • Check box
      • Field description
      • Field message
      • Fieldset
      • Label
      • Radio
      • Select
      • Textarea
      • Text field
      • Heading
      • Link
      • Paragraph
      • Popover
      • Quote
      • Table
      • Tag
      • Text list
    • Molecules
      • Accordion
      • Attachment
      • Breadcrumb
      • Callout
      • Event Card
      • Field
      • Figure
      • Group filter
      • Logo
      • Map
      • Navigation card
      • Next step
      • Pagination
      • Promo card
      • Search
      • Service card
      • Single filter
      • Snippet
      • Subject Card
      • Table of Contents
      • Tabs
      • Tag List
      • Tooltip
      • Video Player
    • Organisms
      • Alert
      • Banner
      • Campaign
      • Footer
      • Header
      • List
      • Message
      • Mobile Navigation
      • Navigation
      • Promo
      • Side Navigation
      • Skip link
      • Slider
      • Social links
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page
  • When to use
  • When not to use
  • Best practice guidelines
  • Variations
  • Accessibility
  • Security
  • Sites using this component
  • Component inspiration and uplift
  • User research on this component
  • Known issues
  • More research needed
  • Help improve this component
  • Resources
  • References

Was this helpful?

Edit on GitHub
Export as PDF
  1. Components
  2. Organisms

Mobile Navigation

PreviousMessageNextNavigation

Last updated 1 month ago

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.

When to use

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

When not to use

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

Best practice guidelines

  • 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.

Variations

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.


Accessibility

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:

WCAG Criterion
Status

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.

Security

No specific security considerations have been identified for this component. Standard web application security practices should be followed when implementing the component.

Sites using this 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.

Component inspiration and uplift

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


User research on this component

★★★★☆ 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.

Known issues

  • 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

More research needed

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

Help improve this component

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


Resources

  • Storybook

  • GitHub

References

  • 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

Changelog

Version
Date
Changes

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

Contact us

If you have a question about the CivicTheme design system or need our help, visit the page for guidance.

Figma
Getting Help