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
  • Changelog
  • Contact us

Was this helpful?

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

Side Navigation

The Side Navigation component helps users navigate through hierarchical content structures and understand their current location within a website or application.

When to use

Use the Side Navigation component when:

  • You need to provide navigation through a hierarchical content structure with multiple levels

  • The content structure is deep enough to require a dedicated navigation system

  • You want users to easily navigate between related pages within a section

  • You need to display the current page's position within the site hierarchy

  • You need to support contextual navigation for content-heavy websites or applications

When not to use

Do not use the Side Navigation component when:

  • The website or application has a very simple or linear structure with only a few pages

  • Most users follow a linear path through your content

  • Screen space is extremely limited, especially on mobile devices

  • The navigation structure is very flat with no need for visual hierarchy

  • You're designing for a single-page application where all content is displayed on a single scrollable page


Best practice guidelines

  • Limited depth: Limit the navigation to two levels whenever possible. While the component supports multiple levels, showing no more than two at once improves usability and reduces cognitive load.

  • Clear current location: Always clearly indicate the user's current location within the navigation hierarchy using visual indicators (such as highlighting, bold text, or a different colour).

  • Consistent placement: Position the Side Navigation in a predictable location - typically on the left side of the page - to align with user expectations.

  • Responsive adaptation: Consider how the Side Navigation will adapt across different screen sizes. On smaller screens, collapse the navigation or provide an alternative access method.

  • Clear labels: Use clear, concise labels for navigation items that accurately describe the destination page content.

  • Visual distinction: Ensure sufficient contrast between the navigation and surrounding content, making it easily distinguishable from the main content area.

  • Keyboard accessibility: Make sure all navigation items are accessible via keyboard navigation, with visible focus states.

  • Parent-child relationships: Clearly indicate parent-child relationships through visual hierarchy and indentation.

Variations

Desktop Side Navigation: The standard desktop version of the Side Navigation shows parent items and their immediate child items, with appropriate visual treatments for default, hover, and active states.

Descendant Side Navigation: A simplified version of the Side Navigation that focuses specifically on showing the current page's siblings and children, helping users navigate directly to related content.


Accessibility

This component has been assessed for compliance with WCAG 2.2 standards.

According to the CivicTheme v1.7.0 Accessibility Assessments document, the Side Navigation component has been evaluated and meets the following accessibility guidelines:

The Side Navigation component limits content to showing the next two levels of the parent level, which makes it more accessible by reducing cognitive load. The component incorporates iconography to visually indicate dropdown functionality and uses distinct accents on the side of the menu to improve visual identification.

Specific test results from the accessibility assessment show:

WCAG Criterion
Status
Notes

Focus Order (Level A)

Pass

Focusable navigation items receive focus in a logical order

Keyboard Accessibility (Level A)

Pass

Navigation is fully accessible using keyboard alone

Focus Visible (Level AA)

Pass

Focus is clearly visible when navigating using a keyboard

Consistent Navigation (Level AA)

Pass

Navigation patterns are consistent throughout the site

Security

No specific security considerations have been documented for this component. As with all navigation components, ensure that access to sensitive areas is properly controlled through authentication and authorization mechanisms at the application level.

Sites using this component

The Side Navigation component is widely used across government, corporate, and educational websites. A working example of this component can be found on the e-Safety Commissioner website, as noted in the CivicTheme documentation.

Component inspiration and uplift

This component has been modelled after the Side Nav component in the former Australian Government Design System (AGDS). It has been uplifted by Salsa Digital, as the custodian of the CivicTheme Design System, in the following ways:

  • Limited depth: CivicTheme limits the side navigation's content by only showing the next two levels of the parent level. This reduces cognitive overload for the reader, displaying only the links relevant to the reader's current journey.

  • Collapsed by default: The side navigation is collapsed by default, within an accordion-like menu expanding down to display the two child levels, which helps maintain visual clarity.

  • Improved visual cues: CivicTheme incorporates iconography to visually indicate dropdown functionality, making the navigation more intuitive.

  • Navigation as wayfinding: The side navigation's heading also functions as a way to navigate back to the parent (landing) page, improving overall navigation.

  • Stronger visual distinction: The component uses more distinct accents on the side of the menu to improve visual identification.


User research on this component

★★★★☆ Confidence rating = High (Informed by research)

User research has been conducted on the Side Navigation component focusing on usability and information architecture. Testing across multiple rounds with diverse users has revealed several key findings:

  • Users appreciate the limited depth approach showing only two levels at once, as it reduces cognitive load while navigating complex site structures

  • The collapsed-by-default approach helps users scan the navigation options more easily

  • Visual cues like iconography for dropdown functionality significantly improve user understanding of the navigation structure

  • The ability to use the heading to navigate back to parent pages was identified as particularly helpful for users who needed to move between levels

Research also validated that the accent lines and clear visual hierarchy help users understand their current location within the site structure, addressing a common navigation challenge.

Known issues

  • Mobile adaptation challenges: The current Side Navigation design may present usability challenges on very small screens where horizontal space is extremely limited.

  • Deep hierarchies: While the component limits display to two levels, sites with especially deep content hierarchies may still need additional navigation solutions for lower levels.

  • Cognitive load: Some users may still find it challenging to understand their exact location within complex site structures, particularly when navigating between sections.

More research needed

More user research is needed in the following areas:

  • Mobile usability: Further testing on a variety of mobile devices to ensure the navigation remains usable on smaller screens

  • Accessibility testing: More comprehensive testing with users who have specific accessibility needs, particularly those using screen readers or keyboard-only navigation

  • Information architecture impact: Research into how different information architecture patterns affect the usability of the Side Navigation component

  • Alternative approaches: Exploration of alternative approaches for very deep hierarchical structures that exceed the two-level display limit

Help improve this component

To help make this component useful and up-to-date, you can:

  • Contribute to our Side Navigation component discussion on GitHub

  • Submit your user research findings to help improve the Side Navigation component

  • Propose a change to the Side Navigation component


Resources

  • Storybook

  • GitHub

References

  • Nielsen Norman Group. (2020). "Hierarchical Information Architecture." https://www.nngroup.com/articles/hierarchical-information-architecture/

  • Krug, S. (2014). "Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability." New Riders.

  • Whitenton, K. (2015). "Website Navigation: Avoiding the 'Quicksand'." Nielsen Norman Group. https://www.nngroup.com/articles/navigation-quicksand/

  • Australian Government Design System (archived). "Side Navigation Component Guidelines."

Changelog

Version
Date
Changes

1.8.0

23 Jul 2024

Improved visual contrast for better accessibility

1.7.0

20 Mar 2024

Added WCAG 2.2 compliance testing

1.6.0

15 Jan 2024

Enhanced keyboard navigation support

1.5.0

10 Nov 2023

Limited display to two levels for improved usability

Contact us

PreviousPromoNextSkip link

Last updated 1 month ago

Was this helpful?

Check out our to learn more.

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

contributing section
Figma
Getting Help