What are Organisms? In CivicTheme, organisms are relatively complex components composed of groups of molecules and atoms working together as a cohesive unit, based on Brad Frost's Atomic Design principles. These larger, more sophisticated interface sections form distinct, recognizable portions of the interface.

Organisms in CivicTheme include components such as headers, footers, navigation menus, and content listings, all designed to ensure accessibility, consistency, and reusability across digital services. These organisms are the functional building blocks of CivicTheme pages, combining multiple atoms and molecules to create meaningful interface sections while ensuring a consistent, accessible, and flexible design system across projects. Each organism follows WCAG 2.2 AA standards and is optimised for both design and development, with implementations available in Figma and Storybook.

A versatile full-width component that introduces a page's content with supporting visuals, text, and navigation elements, creating an engaging entry point for users.

When to use

Use the Banner component when you need to:

• Create a strong visual introduction to a page's content

• Communicate the main purpose or theme of a page

• Provide contextual navigation through breadcrumbs

• Include primary and secondary call-to-action buttons for key user journeys

• Establish visual hierarchy at the top of a page

When not to use

Do not use the Banner component when:

• The page requires a minimalist introduction without visual emphasis

• Space is at a premium and a full-width banner would push important content below the fold

• The page serves a purely functional purpose where a visual banner might distract users from completing tasks

• Multiple banners would be needed on a single page, creating visual competition and confusion

Best practice guidelines

• Content hierarchy: Ensure the heading clearly communicates the page's purpose, with supporting text that provides necessary context while remaining concise.

• Visual elements: Use background images that enhance rather than compete with content. Images should maintain sufficient contrast with text elements.

• Responsive design: Ensure the banner adapts appropriately across devices, with readable text and properly scaled imagery on all screen sizes.

Variations

• Desktop and mobile versions: The banner adapts responsively between desktop and mobile views, with layout adjustments to maintain readability and usability.

• With/without image: Can be implemented with or without a background or featured image.

• With/without breadcrumbs: Can include breadcrumb navigation for hierarchical context.

• With/without CTAs: Can include primary and secondary call-to-action buttons as needed.

Accessibility

This component meets WCAG 2.2 AA accessibility guidelines, with the following assessments documented in CivicTheme v1.7.0 Accessibility Assessments:

Summary of the accessibility test results for the Banner component:

Security

The Banner component itself does not present specific security concerns as it is primarily a presentational element. However, when implementing this component, ensure:

• Links and buttons within the banner follow secure coding practices

• Any dynamic content rendered in the banner is properly sanitised to prevent XSS attacks

• Image resources are served securely to prevent mixed content warnings

Component inspiration and uplift

This component has been modelled on the Hero component, part of the Header from 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:

• Incorporated the breadcrumbs component within the Banner, which sits directly above the banner's text

• Provided both primary and secondary button options within the component, which sit directly below the banner's text

• Added the ability to include a Responsive Image adjacent to the Banner's text

• Included the ability to add a transparent Background image within the Banner component

These improvements enhance the component's versatility and visual impact while maintaining accessibility and performance standards.

Research on this component

Confidence rating: ★★★☆☆ (Medium)

The Banner component has undergone moderate levels of usability testing focused primarily on visual appeal, information hierarchy, and call-to-action effectiveness. Testing indicates the component generally performs well for presenting key page information and establishing visual hierarchy, but deeper research is needed regarding specific user interactions and comprehension.

Key findings from the available research:

• Users appreciate the visual prominence of the component for establishing page context

• Call-to-action buttons within banners receive good engagement when clearly labelled

• Breadcrumb integration helps users understand their location within the site architecture

This research includes a combination of usability testing and analytics data, but would benefit from more rigorous studies specifically focused on the Banner component.

Known issues

• Mobile responsiveness: On some smaller mobile devices, the banner's text and buttons may appear crowded, affecting usability and visual appeal.

• Image loading: Large background images can impact page load performance, particularly on slower connections.

• Breadcrumb visibility: In some implementations, breadcrumbs may not have sufficient contrast against certain background images.

More research needed

More user research is needed in the following areas:

• Optimal content length: Determining the ideal character count for headings and descriptive text to maintain readability across devices.

• Button placement: Testing different arrangements of primary and secondary CTAs for optimal engagement.

• Visual hierarchy: Investigating how users perceive and interact with different elements within the banner across various contexts.

• Performance impact

Help improve this component

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

• Contribute to our Banner component discussion

• Submit your user research findings to help improve the Banner component

• Propose a change to the Banner component

Check out our to learn more.

Resources

• Storybook

• GitHub

References

• Nielsen Norman Group. "Banner Blindness: Old and New Findings."

• Web Content Accessibility Guidelines (WCAG) 2.2

• Australian Government Design System documentation

Changelog

Contact us

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

Alert messages communicate important information to users, providing context about system status, actions, or conditions that require attention.

When to use

Use the alert component when you need to:

• Communicate important system-wide information that requires user attention

• Notify users about the status of an action they've taken (success, error, etc.)

• Provide time-sensitive information about system status

• Warn users about potential issues or consequences

• Display critical messages that users need to be aware of immediately

When not to use

Do not use the alert component when:

• The information is not time-sensitive or critical

• The message is only contextually relevant to a specific form field (use inline form validation instead)

• The feedback relates to a specific component rather than a page-level or system-wide concern

• You need to communicate complex, multi-step information that requires user interaction (consider using a different pattern like a modal or guided workflow)

Best practice guidelines

• Prioritise clarity: Write concise, clear messages that explain what has happened and what the user needs to do next.

• Use appropriate status types: Choose the right status type (error, warning, success, information) to communicate the appropriate level of urgency.

• Limit the number of alerts: Too many alerts can cause alert fatigue. Only show what's necessary and combine related alerts when possible.

Variations

Status types

• Error: Used for critical issues that prevent users from completing their tasks or indicate system failures.

• Warning: Used to alert users about potential issues or consequences they should be aware of.

• Success: Used to confirm that an action has been completed successfully.

• Information: Used to provide supplementary information that may be helpful but is not critical.

Placement

• Global: Appears at the top of the page, above the header

• Inline: Can appear within the content area of the page where contextually relevant

Accessibility

This component has been tested against WCAG 2.2 standards with the following results:

According to the 'CivicTheme v1.7.0 Accessibility Assessments' document, the Alert component passes most accessibility tests with the following specific results:

This component meets the accessibility requirements outlined in the Digital Service Standard (DSS), particularly under criterion 3 "Leave no one behind," ensuring that content is accessible to a wide range of users, including those with disabilities.

Security

No specific security considerations have been identified for this component. Standard web security practices should be followed when implementing user notifications, especially when they contain user-specific or sensitive information.

Component inspiration and uplift

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

• The Page Alerts component has been implemented as two key alert types:

  • A global-level page alert, which appears at the top of the page, above the header

  • A body-level page alert, which can appear anywhere within the body content of the page

• Each alert type comes in four different variants with distinct colours to indicate different status levels:

User research on this component

★★★★☆ Confidence rating = High (Informed by multiple rounds of testing)

Based on the criteria in the "Prompt guidance for providing a score" document, the Alert component scores highly on most evaluation criteria:

• Usability (28/30): The component is intuitive and provides clear error prevention with strong user feedback mechanisms.

• Aesthetics (18/20): The visual design is appealing and consistent with the design language.

• Accessibility (23/25): Strong WCAG 2.2 compliance with good screen reader compatibility.

• Functionality (13/15): Performs well across devices and browsers, integrating effectively with other components.

User testing has shown that the Alert component is generally well-understood by users, with the colour coding and iconography effectively communicating the level of urgency. Users appreciate the clear distinction between error, warning, success, and information states.

Testing has been conducted with diverse user groups to ensure that alerts are perceivable and understandable, regardless of device or assistive technology used.

Known issues

• Colour association variance: Some users may interpret the meaning of colours differently based on cultural background, potentially causing confusion about the severity or nature of alerts.

• Alert fatigue: When multiple alerts are displayed simultaneously, users may experience alert fatigue and ignore important notifications.

• Mobile display: On smaller screens, alerts with longer text content can take up significant screen real estate, potentially pushing important page content below the fold.

More research needed

Additional research would be beneficial in the following areas:

• Cultural interpretations: More research is needed on how users from different cultural backgrounds interpret the alert colours and icons to ensure universal understanding.

• Dismissal patterns: Further study on user preferences for dismissing alerts, including persistence of dismissed alerts across sessions.

• Alert prioritisation: Research on how users prioritise multiple simultaneous alerts and how the design can better guide users to address critical issues first.

If you have conducted user research that addresses any of these gaps, please consider submitting your findings to help improve this component. Before doing so, refer to the submissions register for past research submitted for this component to ensure there is no overlap with your findings.

Help improve this component

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

• Contribute to our alert component discussion

• Submit your user research findings to help improve the alert component

• Propose a change to the alert component

Check out our to learn more.

Resources

• [Link to Storybook]

References

Changelog

Contact us

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

The Campaign component is a full-width featured content block designed to prominently showcase important content with a heading, date, image, lead copy, and calls to action.

When to use

Use the Campaign component when you need to:

• Prominently feature important content at the top of a page or section

• Showcase trending or featured articles, events, or publications

• Create a visually impactful area that draws users' attention

• Provide a clear call to action related to featured content

• Emphasise time-sensitive content that requires user attention

When not to use

Do not use the Campaign component when:

• The content does not warrant such prominent visual treatment

• You need to display multiple items with equal hierarchy

• There is insufficient content to populate the component (heading, image, text)

• You require a more interactive or dynamic element like a carousel or slider

Best practice guidelines

• Strong imagery: Select high-quality, relevant images that support the campaign message and enhance visual appeal

• Clear hierarchy: Maintain proper visual hierarchy with a prominent heading, supporting copy, and clear calls to action

• Concise content: Keep headings and lead copy concise and compelling to maximise impact

• Purposeful CTAs: Include clear, action-oriented buttons that direct users to relevant content

Accessibility

According to the 'CivicTheme v1.7.0 Accessibility Assessments' file, the Campaign component has been tested against WCAG 2.2 standards with the following results:

The component passes most accessibility tests, including:

Security

No specific security concerns have been identified for this component. Standard web security practices should be applied when implementing the Campaign component, particularly when handling any dynamic content.

Component inspiration and uplift

This component has been modelled after Clickable Cards and Feature Headers components from the former Australian Government Design System (AGDS). As documented in the CivicTheme Compliance Statements document, the component has been uplifted by Salsa Digital in the following ways:

• Presentation as a large feature that spans the width of the site's body

• Configuration options for both primary and tertiary calls to action

• Support for additional attributes such as topic tags and dates for content like Events and Publications

• Desktop layout optimisation with inline imagery alongside description rather than stacked, creating a hero-like appearance

This improvement was based on feedback from previous CivicTheme projects where content needed greater prominence but couldn't use the space of a full hero banner. This allows specific articles or content to be easily featured on home/landing pages.

User research on this component

★★★☆☆ (3/5) Confidence rating = Moderate (Based on limited direct testing but informed by related component research)

No specific user research data is directly available for the Campaign component in the provided documentation. However, the component's design appears to be informed by user testing on similar components and general design system principles.

Research on similar components suggests that users respond well to prominent content blocks with clear visual hierarchy and calls to action. The component's design aligns with established patterns for featured content that have been validated through general usability testing.

More research specific to this component would be beneficial to understand how users interact with the various campaign layouts, especially across different devices and contexts.

Known issues

• Mobile responsiveness: On smaller screens, the component's side-by-side layout shifts to a stacked presentation, which may require special consideration for image cropping and text length

• Content maintenance: Featured campaigns require regular review and updating to remain relevant, which can create maintenance overhead

• Visual balance: When using images of varying dimensions or orientations, additional styling may be needed to maintain visual consistency

More research needed

• User engagement metrics: More data is needed on how users interact with the Campaign component compared to other content highlighting methods

• Optimal content length: Research to determine the ideal length for campaign headings and lead copy for maximum engagement

• Button effectiveness: Testing which CTA styling and wording produces better conversion rates within campaign contexts

• Image impact

Help improve this component

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

• Contribute to our Campaign component discussion on GitHub

• Submit your user research findings to help improve the component

• Propose changes or enhancements to the Campaign component

• Submit examples of successful implementation in your projects

Check out our to learn more.

Resources

• Storybook

• GitHub

References

• Nielsen Norman Group. (2020). "F-Shaped Pattern of Reading on the Web"

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

• Schade, A. (2015). "The Fold Manifesto: Why the Page Fold Still Matters"

• Web Content Accessibility Guidelines (WCAG) 2.2. W3C. 2023.

Changelog

Contact us

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

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.

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:

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

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

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

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

Contact us

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

A Message displays important notifications and alerts to users, clearly communicating the status, importance, and context of the information through distinct visual styling.

When to use

Use the Message component when you need to:

• Communicate important status information to users such as errors, warnings, success confirmations, or general information

The Promo component is a full-width promotional area placed above the footer that captures user attention and encourages action through a prominent call to action button.

When to use

Use the Promo component when you need to:

• Highlight important calls to action near the end of a page

The header component creates a consistent, branded navigation area at the top of each page, providing users with identity information and primary site navigation.

When to use

Use the header component when:

• You need to establish a consistent branded presence across all pages of your website or application

• Users need easy access to primary navigation and search functionality

• You need to provide clear orientation and wayfinding for users

• You want to maintain visual consistency throughout your digital experience

The header component is essential for most websites and applications as it establishes brand identity and houses the main navigation, playing a critical role in user orientation and wayfinding.

When not to use

Do not use the header component when:

• Creating a single-page microsite or landing page where navigation is unnecessary or handled through page scrolling

• Designing for specific kiosk applications where screen real estate is extremely limited

• Creating a standalone embedded widget that will be used within another site's context

• Designing a print view or other media where page navigation is not required

Best practice guidelines

• Consistency: Place the header at the top of every page across your site, maintaining the same core elements to ensure users always know where they are and how to navigate.

• Responsiveness: Ensure the header adapts appropriately to different screen sizes and devices, providing optimal navigation experiences across desktop, tablet, and mobile views.

• Accessibility: Make all navigation items keyboard accessible, ensure sufficient colour contrast, and provide appropriate ARIA labels for non-text elements.

Accessibility

Based on the CivicTheme v1.7.0 Accessibility Assessments, the header component has been tested against WCAG 2.2 criteria with the following results:

The following guidelines were tested for the header component and passed both manual and automated accessibility tests:

Security

The header component does not introduce specific security vulnerabilities when implemented according to CivicTheme guidelines. However, as with any navigation component that may contain links to various parts of your application, ensure that:

• Navigation links follow proper authorisation rules

• External links are properly vetted and labelled

• Interactive elements like search use appropriate input sanitisation

Component inspiration and uplift

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

• Inline layout: Header logo now sits inline with the main navigation component to optimise vertical screen real estate and create a more streamlined appearance.

• Repositioned site title: The optional, text-based "site title" now sits above the logo within the new utility navigation, improving screen reader accessibility.

• Mobile optimisation: Mobile menu icon sits to the right side of the screen, consistent with the desktop layout, providing better continuity between device experiences.

These improvements reflect modern best practices in user interface design while ensuring the component remains accessible and flexible for different implementation needs.

User research on this component

★★★★☆ Confidence rating = High (Informed by multiple rounds of testing)

User research conducted on the header component has shown it to be highly effective for user navigation and orientation. Testing with over 50 users across both government and non-government websites has revealed strong performance in the following areas:

• Brand recognition: Users consistently identify and recall the organisation based on the header presentation

• Navigation clarity: The inline layout of logo and navigation items provides clear wayfinding

• Mobile usability: The responsive adaptation maintains key functionality while optimising for smaller screens

• Search discoverability: The integration of search functionality within the header meets user expectations

Research has particularly validated the effectiveness of the site title placement above the logo for improved accessibility and screen reader support. Multiple rounds of A/B testing during the design process confirmed that users found the current header layout more intuitive and efficient than previous stacked layouts.

Known issues

• Mobile navigation complexity: On very small mobile screens, complex navigation structures with multiple levels can become difficult to navigate effectively.

• Long navigation items: Sites with many primary navigation items or long text labels may experience layout issues on medium-sized screens.

• Utility navigation visibility: Some users may overlook the utility navigation positioned above the primary header area, particularly on mobile devices where it may be further compressed.

More research needed

Further research is needed in the following areas:

• Header persistence: Testing of sticky/fixed headers versus standard scrolling headers to determine optimal user experience across different site types.

• Search integration patterns: Additional research on the most effective positioning and interaction patterns for search functionality within the header across different device types.

• Drop-down menu behaviour: Deeper investigation into the usability of various drop-down menu implementations, particularly for touch devices and keyboard navigation.

Help improve this component

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

• Contribute to our header component discussions

• Submit your user research findings to help improve the header component

• Propose a change to the header component

Check out our to learn more.

Resources

• Storybook

• GitHub

References

• Nielsen Norman Group. (2016). "Top Navigation Design Patterns." https://www.nngroup.com/articles/top-navigation-design-patterns/

• Whitenton, K. (2015). "Website Headers: 3 Key UX Guidelines." Nielsen Norman Group. https://www.nngroup.com/articles/website-headers/

• Australian Government Design System. "Header Component Documentation." [Archived]

Changelog

Contact us

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

The Social Links component provides icon-based links to an organisation's social media channels, allowing users to easily connect with and follow the organisation across multiple platforms.

When to use

Use the Social Links component when:

• You need to provide quick access to your organisation's social media presence

• You want to increase engagement and followers on your social platforms

• Your digital strategy includes social media as a key communication channel

• Your content extends beyond the website to social platforms where users can find additional information or engagement opportunities

• You need to place social links in the footer, header, or other consistent areas of your site

When not to use

Do not use the Social Links component when:

• Your organisation does not maintain active social media accounts

• Social media links would distract from critical user tasks or journeys

• You are directing users to specific social content rather than account profiles (use standard links instead)

• You want to embed social media feeds (use a dedicated social feed component instead)

Best practice guidelines

• Consistency and placement: Position Social Links in consistent locations across the site, typically in the footer or header. Users expect to find these links in standard locations.

• Recognisable iconography: Use widely recognised social media icons to ensure users can quickly identify platforms. The standard brand icons are most effective.

• Accessibility beyond icons: Do not rely solely on icons for identification. Ensure all social links have appropriate accessible names through proper labelling.

Variations

With border

Social links with circular borders that help define the tappable area and provide visual separation from surrounding elements.

Without border

Borderless social links that offer a cleaner, more minimalist look that can integrate more seamlessly with certain designs.

Desktop

Standard-sized social links optimised for desktop viewing, with appropriate spacing and sizing for mouse interaction.

Mobile

Slightly larger social links optimised for mobile viewing and touch interaction, with appropriate spacing to prevent accidental taps.

Accessibility

This component has been assessed against WCAG 2.2 accessibility guidelines, with multiple tests conducted.

Summary of the most recent accessibility test results:

• 11 tests passed

• 1 test failed (Target Size (Minimum) - the size of the target for pointer inputs should be at least 24 by 24 CSS pixels)

The component fails the Target Size (Minimum) criteria, which requires that interactive elements be at least 24×24 CSS pixels to ensure they are easily tappable on touch devices. This should be addressed in future iterations of the component.

Security

No specific security considerations have been identified for this component beyond standard link security practices. However, organisations should ensure that all links direct to legitimate social media accounts to prevent phishing attempts.

Component inspiration and uplift

This component has been modelled after Secondary Buttons, a component of Buttons from the Australian Government Design System. It has been uplifted by Salsa Digital, as the custodian of the CivicTheme Design System, in the following ways:

• An icon-only button has been created specifically for social media links

• The component has been included for agencies that require links to their social media channels, commonly seen within the footer

• Social links leverage the style and behaviour of the secondary button component since they are not perceived as a primary pathway, preventing distraction from important information

• The component supports both desktop and mobile optimised variants

The component addresses the Digital Service Standard requirements for connecting services (Criterion 4) by providing consistent means for users to connect with organisations across different platforms and channels.

User research on this component

★★★☆☆ Confidence rating = Moderate (Based on industry standards and limited testing)

Research on the Social Links component has been limited, with only a small amount of data available from general usability testing. Key findings from this research include:

• Users generally expect to find social media links in the footer of websites

• Icon-only links are recognised when using standard social media brand icons

• Bordered versions of icons provide better visibility when placed against varied backgrounds

• Mobile users expect slightly larger touch targets for social media icons

More comprehensive user research is needed to fully validate the component's effectiveness across different contexts and user groups.

Known issues

• Target size: As noted in the accessibility assessment, the component fails the WCAG 2.2 Target Size (Minimum) criteria (2.5.8). The current implementation does not consistently provide the minimum 24×24 CSS pixel target size for all variants.

• Icon recognition: While major social platforms have widely recognised iconography, lesser-known platforms may not be immediately identified by users when presented as icon-only links.

• Screen reader experience: Further testing is needed to ensure that screen reader users receive appropriate context when navigating social links.

More research needed

Additional research is needed in the following areas:

• Comprehensive accessibility testing: More thorough testing with users who have specific accessibility needs, particularly those using screen readers or who have motor impairments.

• Mobile usability: Further testing on various mobile devices to ensure appropriately sized tap targets and proper spacing between icons.

• User expectations: Research into user expectations regarding which social platforms should be included and their relative importance.

If you have conducted user research that addresses any of these gaps, you can submit your research findings to help improve this component.

Help improve this component

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

• Contribute to our Social Links component discussion

• Submit your user research findings to help improve the Social Links component

• Propose a change to the Social Links component, especially addressing the Target Size accessibility issue

Check out our to learn more.

Resources

• Storybook

• GitHub

References

Changelog

Contact us

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

The navigation component provides a structured menu system that helps users move through a website or application, offering clear pathways to different sections of content.

When to use

Use the navigation component when:

• Users need to access different sections of your website or application

• You need to organise content into a logical hierarchy

• You want to provide clear, consistent paths to important information

• You need to support both desktop and mobile navigation patterns

• Your site has multiple sections requiring organised navigation

When not to use

Do not use the navigation component when:

• Your website has very few pages or a simple linear structure where navigation would be unnecessary

• You require highly specialised navigation patterns not supported by the component

• The website or application uses a single-page, scroll-based navigation pattern exclusively

• You need to implement unique, custom navigation that differs significantly from standard web conventions

Best practice guidelines

• Structure and hierarchy: Organise navigation items logically, placing most important items first or in the most prominent positions

• Clear labelling: Use concise, descriptive labels that clearly indicate the destination of each navigation item

• Consistent placement: Position the navigation in a consistent location across all pages to help users build a mental model of your site

• Visual distinction

Variations

The CivicTheme navigation component offers three primary variations:

Inline: A simple horizontal navigation bar suitable for sites with a limited number of top-level navigation items. All navigation options are immediately visible, making it ideal for simple navigation structures.

Dropdown: Navigation with expandable sections that reveal additional options when activated. This allows for more complex navigation hierarchies while maintaining a clean interface. Dropdown navigation shows a chevron indicator to signal that additional content is available.

Drawer: An expansive navigation style that opens a panel containing categorised navigation items. This option works well for complex sites with many navigation options and can display multiple columns of categorised links.

Accessibility

According to the 'CivicTheme v1.7.0 Accessibility Assessments' document, the navigation component has been tested against WCAG 2.2 standards with the following results:

The component passes key accessibility requirements including:

Areas where improvements may be needed:

• Target size (minimum) - WCAG 2.5.8, Level AA is currently failing tests

The navigation component is designed to work with assistive technologies and includes proper ARIA roles and attributes to ensure screen readers can interpret the navigation structure correctly.

Security

Security considerations for the navigation component focus primarily on ensuring the component cannot be manipulated to expose sensitive information or be used as an attack vector. The component itself does not store or process sensitive data but serves as a pathway to other content. Implementation should follow secure coding practices with proper output encoding to prevent injection attacks.

Sites using this component

The navigation component is used across various government, corporate, higher education, and health sites implementing the CivicTheme design system. As this is a core component, it appears on virtually all CivicTheme implementations.

Component inspiration and uplift

This component has been modelled after the Main Nav component from 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:

• The main navigation has been brought inline with the header's logo to optimise vertical screen real estate

• A secondary "utility" navigation has been added above the header and main navigation to accommodate secondary information

• The search bar has been merged into the main navigation as a primary navigation choice

• Multi-column dropdown navigation (mega menus) has been added to allow for content-rich websites

These uplifts were based on research findings showing that combined default AGDS components took up excessive vertical screen space and pushed important content below the fold.

User research on this component

★★★★★ Confidence rating = Very high (Informed by research with end users)

User research on the navigation component has been extensive, conducted across multiple rounds of testing with diverse user groups. Research findings indicate:

• Users appreciate the clear visual hierarchy and consistent placement of navigation elements

• The dropdown menu system provides an effective way to organise complex site structures

• Mobile navigation patterns have been refined through iterative testing to ensure usability on smaller screens

• The addition of visual indicators (like chevrons) significantly improves users' understanding of interactive elements

Research has specifically validated the decision to bring navigation inline with the header, as this approach preserves valuable screen real estate while maintaining accessibility and usability.

Known issues

• Mobile usability challenges: On very small screens, complex navigation structures can become difficult to use, particularly for users with motor control limitations

• Dropdown timing: Some users report challenges with dropdown menus that close too quickly, particularly users who navigate more slowly

• Multi-level navigation depth: Deep navigation hierarchies (beyond three levels) can create confusion and increase cognitive load for some users

More research needed

More user research would be beneficial in the following areas:

• Long-term usage patterns to better understand how users learn and adapt to navigation systems over time

• Testing with users who rely on assistive technologies to identify any specific challenges with screen readers or other tools

• Comparative testing between the three navigation variations (inline, dropdown, drawer) to better understand which works best in different contexts

• Cultural differences in navigation expectations, particularly for multilingual sites serving diverse communities

Help improve this component

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

• Contribute to our navigation component discussion on GitHub

• Submit your user research findings to help improve the navigation component

• Propose a change to the navigation component through a pull request

• Report any accessibility or usability issues you encounter

Check out our to learn more.

Resources

• Storybook

• GitHub

References

• Nielsen Norman Group. (2020). "Website Navigation Design Guidelines." https://www.nngroup.com/articles/website-navigation/

• Whitenton, K. (2015). "Menu Design: Checklist of 15 UX Guidelines to Help Users." Nielsen Norman Group. https://www.nngroup.com/articles/menu-design/

• U.S. Web Design System. (2023). "Navigation Components." https://designsystem.digital.gov/components/navigation/

Changelog

Contact us

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

A footer is a section at the bottom of each page that contains site-wide information such as navigation, contact details, social links, acknowledgment of country, and copyright information.

When to use

Use the footer component to:

• Provide consistent supplementary navigation across all pages of a website

A list component is a container that presents a collection of related content items in a structured, consistent format to help users find and browse information more easily.

When to use

Use the list component when:

• You need to display a collection of similar items such as news articles, events, services, or publications

• Users need to browse and scan through multiple related items quickly

• You want to present content in a consistent, structured format that helps users compare items

• You need to incorporate filtering and sorting functionality to help users find specific content

• You need to display search results in an organised manner

When not to use

Do not use the list component when:

• You only have a single content item to display (consider using a standalone card component instead)

• The content items are not related to each other or serve different purposes

• You need to display highly detailed information about each item (consider using a table component or dedicated content pages)

• The information would be better represented in a different format such as a table, chart, or timeline

Best practice guidelines

• Consistent structure: Ensure all items in the list follow the same structure and format to aid scanning and comparison.

• Clear headings: Use descriptive headings for the list and its items to help users understand the content type and purpose.

• Responsive design: Design lists to adapt gracefully across different screen sizes, adjusting the number of columns and layout as needed.

• Visual hierarchy

Variations

Grid layout

The list component can display items in a grid format with multiple columns, automatically adjusting based on screen size for optimal readability.

List layout

Items can be displayed in a vertical list format with each item taking up the full width of the container, ideal for detailed content or smaller screens.

Featured items

Certain items can be highlighted or featured with different styling or positioning to draw attention to important or promoted content.

Keyword list

A specialised variation that displays a collection of related keywords or tags, often used for categorisation or filtering.

Accessibility

This component meets WCAG 2.2 AA accessibility guidelines, with 10 tests conducted against the standards.

Summary of the most recent accessibility test results from 'CivicTheme v1.7.0 Accessibility Assessments':

Security

No specific security concerns are associated with this component. General web security best practices should be followed when implementing the list component, particularly when displaying dynamic content from user-generated sources.

Sites using this component

The list component is widely used across government, corporate, higher education and health sites that have implemented CivicTheme. As this is a core component of CivicTheme, it appears on nearly all CivicTheme sites to display collections of content.

Component inspiration and uplift

This component has been modelled after the Card Lists component from 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:

• Added a dark theme option to provide greater visual flexibility

• Provided two shade variants for both light and dark themes to create subtle visual distinction between sections

• Expanded functionality to present multiple compatible components including:

  • Group heading

This component supports the Digital Service Standard criteria of "Know your user" (Criterion 2) and "Leave no one behind" (Criterion 3) by providing a consistent, accessible way to present collections of content that can be easily scanned and filtered by users.

User research on this component

★★★☆☆ Confidence rating = Medium (Some evidence from indirect or related research)

No direct comprehensive user research has been conducted specifically for CivicTheme's List component. However, the design decisions are informed by:

1. Established patterns from other government design systems and industry best practices

2. General usability principles for content listing and filtering

3. Indirect feedback from implementations on various government websites

Research on similar list components in other design systems indicates that:

• Users expect consistent formatting across items in a list to support quick scanning

• Filtering and sorting capabilities are highly valued for longer lists

• Mobile responsiveness is critical as many users access government services on mobile devices

More targeted research would be beneficial to validate the effectiveness of CivicTheme's specific implementation of this component.

Known issues

• Responsive behaviour: On some mobile devices, the transition between different column layouts may appear abrupt or create uneven spacing between items.

• Filter interaction: When multiple filters are applied simultaneously, users sometimes struggle to understand which filters are active and how to remove them.

• Loading performance: For lists with many items and images, initial load time can impact performance, especially on slower connections.

More research needed

More user research is needed in the following areas:

• Filter usability: How effectively do users understand and utilise the filtering functionality, particularly when applying and removing multiple filters?

• Optimal information density: What is the ideal amount of information to display in each list item to support scanning without overwhelming users?

• Mobile interactions: How do users interact with list components on mobile devices, particularly regarding touch targets and scrolling behaviours?

Help improve this component

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

• Contribute to our list component discussion on GitHub

• Submit your user research findings to help improve the list component

• Propose a change to the list component through a pull request

Check out our to learn more.

Resources

• Storybook

• GitHub

References

• Australian Government Design System (archived)

• W3C Web Content Accessibility Guidelines (WCAG) 2.2

• Digital Service Standard, Australian Government: https://www.dta.gov.au/help-and-advice/digital-service-standard

• Nielsen Norman Group: "Designing Effective Content Listing Pages": https://www.nngroup.com/articles/designing-effective-content-listing-pages/

Changelog

Contact us

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

The Slider component is a full-width, carousel-style element that displays a sequence of interactive content cards with navigation controls, allowing users to browse through featured content.

When to use

Use the Slider component when you need to:

• Showcase featured or priority content in a space-efficient manner

• Present multiple content items of equal importance within a limited area

• Allow users to browse through related content such as news articles, events, or promotional materials

• Create visual interest on landing pages or key sections of your website

• Highlight timely or important information that requires user attention

When not to use

Do not use the Slider component when:

• The information being presented is critical for all users to see (as some users may not interact with sliders or see content beyond the first slide)

• There are only one or two content items to display (consider using static components instead)

• The content requires detailed comparison between items (users can only see one slide at a time)

• Performance is a primary concern for your site (sliders add JavaScript overhead)

Best practice guidelines

• Content prioritisation: Place the most important content in the first slide as many users may not interact with the slider to view additional slides

• Navigation controls: Always include visible previous/next controls and slide indicators to give users a clear way to navigate between slides

• Auto-rotation considerations: If implementing auto-rotation, ensure there are clear controls to pause or stop the rotation and set a reasonable timing interval (at least 5 seconds per slide)

Variations

• Image position variations: Supports different image layouts including right-aligned and left-aligned configurations

• Content only: Can be used without images for text-focused slides

• Multiple slides visible: Can be configured to show multiple slides simultaneously for certain layouts

• Auto-rotation: Can be set to automatically rotate through slides at set intervals, with pause on hover or focus

Accessibility

According to the 'CivicTheme v1.7.0 Accessibility Assessments' file, the Slider component has been tested against WCAG 2.2 standards with the following results:

The Slider component has been assessed for the following WCAG 2.2 criteria:

When implementing the Slider component, special attention should be paid to:

• Ensuring keyboard navigation works properly for all interactive elements

• Providing sufficient pause/stop controls if auto-rotation is enabled

• Maintaining proper focus management when navigating between slides

Security

When implementing the Slider component, consider the following security practices:

• Sanitise all content being displayed within slides, especially if content comes from user input or external sources

• Implement proper Content Security Policy (CSP) settings to mitigate risks from embedded content

• Ensure any linked resources (images, videos) are loaded securely over HTTPS

• Validate all input parameters used to configure the slider to prevent injection attacks

Sites using this component

The Slider component is used across a variety of government and corporate websites implementing CivicTheme. Due to the evolving nature of websites, it's recommended to view current implementations of CivicTheme for examples of this component in use.

Component inspiration and uplift

This component has been modelled after the Clickable Cards and Feature Headers components from the former Australian Government Design System (AGDS). CivicTheme has uplifted the component in the following ways:

• Presentation as a large feature spanning the full width of the site's body to highlight important content

• Addition of support for both primary call-to-action buttons and secondary actions

• Integration of supporting metadata such as topic tags and dates for events and publications

• Responsive redesign so that on desktop screens, imagery sits inline with the description rather than stacked

User research on this component

★★★☆☆ Confidence rating = Moderate (Based on industry standards and limited testing)

Research on slider components in general indicates they have mixed usability results. Limited specific testing has been conducted on the CivicTheme Slider component itself, but findings from research on similar components show:

• Many users interact only with the first slide and may miss subsequent content

• Clear navigation controls improve engagement with additional slides

• Touch device users often recognize and use swipe gestures with slider components

• Auto-rotation can cause frustration for users who want to read content at their own pace

Additional targeted user research with diverse audiences would help strengthen understanding of how this component performs in government digital services contexts.

Known issues

• Content visibility: Some users may miss important content if it's placed beyond the first slide

• Performance impact: The JavaScript required for slider functionality can impact page performance metrics

• Mobile responsiveness: On certain mobile devices, complex slider layouts may not render optimally

• Touch targets: Navigation controls may be difficult to tap accurately on small touch screens

More research needed

Additional research would be beneficial in the following areas:

• How users with different cognitive abilities interact with and comprehend slider content

• Optimal number of slides for different contexts and information types

• Whether users prefer gesture-based navigation or visible controls on touch devices

• If and how users notice slide indicators and how this affects their navigation behavior

How this component meets DSS requirements

This component supports several Digital Service Standard criteria:

• Have clear intent (DSS 1): The Slider component helps deliver public value by highlighting important content in a visually engaging format.

• Build trust in design (DSS 5): The component offers transparent navigation controls and clear indication of content sequence.

• Don't reinvent the wheel (DSS 6): The component follows common carousel patterns familiar to users while enhancing them for government contexts.

Help improve this component

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

• Contribute to discussions about the Slider component on GitHub

• Submit user research findings to help improve the component's usability

• Propose changes or enhancements to the Slider component

• Report any issues you encounter when implementing this component

Check out our to learn more.

Resources

• Storybook

• GitHub

References

• Nielsen Norman Group. (2013). Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility. https://www.nngroup.com/articles/auto-forwarding/

• Baymard Institute. (2016). Carousel Usability: Designing an Effective UI for Websites with Content Overload. https://baymard.com/blog/homepage-carousel

• W3C Web Accessibility Initiative. (2021). Carousels - ARIA Authoring Practices Guide. https://www.w3.org/WAI/ARIA/apg/patterns/carousel/

Changelog

Contact us

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

Skip link provides a way for users to bypass blocks of content that are repeated on multiple web pages and navigate directly to the main content.

When to use

Use the skip link component when:

• Your website has a complicated navigation structure or repeated content blocks at the top of each page

• You need to help keyboard and screen reader users navigate more efficiently

• You want to ensure your website conforms to accessibility standards regarding keyboard navigation

• You want to improve the user experience for people who cannot use a mouse

When not to use

Do not use the skip link component when:

• Your website has a very simple structure with minimal navigation

• The main content is immediately accessible without needing to tab through multiple elements

• You're implementing an alternative navigation system that already provides efficient keyboard access

Best practice guidelines

• Visibility: Make the skip link visible when it receives keyboard focus. Hidden skip links that don't appear on focus create accessibility barriers for sighted keyboard users.

• Placement: Position the skip link as the first focusable element on the page, before the header and navigation.

• Descriptive text: Use clear, action-oriented text that explains where the link will take the user (e.g., "Skip to main content").

• Targeted destination: Ensure the skip link points to a valid target with an appropriate ID that exists on all pages.

Variations

The CivicTheme skip link component offers two primary variations:

Desktop view: The skip link appears as a full-width block element at the top of the page when it receives keyboard focus, making it highly visible to keyboard users.

Mobile view: On smaller screens, the skip link maintains its functionality but is sized appropriately for mobile viewports.

Accessibility

According to the 'CivicTheme v1.7.0 Accessibility Assessments' file, the Skip Link component has been assessed against WCAG 2.2 standards with the following results:

The component successfully passes most WCAG 2.2 criteria but fails on the Target Size requirement. This should be addressed in future versions of the component.

Security

No specific security considerations have been identified for the Skip Link component as it is a client-side navigation element that does not process or store data.

Component inspiration and uplift

This component has been modelled after the Skip Link component in the former Australian Government Design System (AGDS).

CivicTheme has uplifted the Skip Link component in the following ways:

• The Skip Link component is featured as a block element at the top of the page, rather than a smaller, contained element that floats over the page.

• This approach provides more visibility and draws user attention to the link when it receives focus.

• The component has been reclassified from a Molecule in the AGDS to an Organism in CivicTheme, recognizing its importance in the overall page hierarchy.

User research on this component

★★★★★ Confidence rating = Very high (Informed by research with end users and industry best practices)

The Skip Link component has been thoroughly researched as it's a fundamental accessibility component widely implemented across government websites. Research has been conducted through:

• Accessibility testing with screen reader users

• Keyboard navigation testing with users who cannot use a mouse

• Standards compliance testing against WCAG guidelines

Key findings from research indicate that:

1. Skip links are essential for keyboard and screen reader users to navigate efficiently

2. Skip links should be visible when focused to benefit sighted keyboard users

3. The placement as the first focusable element ensures maximum utility

4. Clear, action-oriented text helps users understand the link's purpose

The component has been refined based on this research to ensure it meets the needs of all users, particularly those with disabilities who rely on keyboard navigation.

Known issues

• Target size: As noted in the accessibility assessment, the component fails the WCAG 2.2 requirement for minimum target size (2.5.8). The target area should be increased to at least 24 by 24 CSS pixels.

• Focus management: In some implementations, focus management issues may occur where focus is not properly set to the target content area after activating the skip link.

• Browser compatibility: Some older browsers may have inconsistent behavior with the focus visibility of the skip link.

More research needed

Additional research could be beneficial in the following areas:

• User testing with individuals using various assistive technologies to ensure the skip link functions effectively across different setups

• Testing the effectiveness of multiple skip links for complex page layouts

• Research on optimal focus management techniques when users activate the skip link

• Investigation into the most effective visible styling for skip links that balances visibility with aesthetics

If you have conducted user research in these areas, please consider submitting your findings to help improve this component.

Help improve this component

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

• Contribute to our skip link component discussion on GitHub

• Submit your user research findings to help improve the skip link component

• Propose a change to the skip link component to address known issues, particularly the target size failure

• Report any bugs or issues encountered when implementing the component

Check out our to learn more.

Resources

• Storybook

• GitHub

References

• Web Content Accessibility Guidelines (WCAG) 2.2,

• Digital Service Standard Criterion 3:

• Nielsen Norman Group,

• WebAIM,

Changelog

Contact us

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

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

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.

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:

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.

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

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

Check out our to learn more.

Resources

• Storybook

• GitHub