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
  • Component inspiration and uplift
  • Meeting DSS requirements
  • 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. Molecules

Breadcrumb

The breadcrumb component helps users understand their current location within a website's hierarchy and provides navigation paths to higher-level pages.

When to use

Use the breadcrumb component when:

  • Your website or application has a hierarchical structure with multiple levels of navigation

  • Users need to understand where they are within the site structure

  • You want to provide quick navigation to parent or higher-level pages

  • Users might need to backtrack or move laterally through your site structure

  • The content is more than three levels deep from the homepage

When not to use

Do not use the breadcrumb component when:

  • Your website has a flat structure with no clear hierarchy

  • The site has very few pages and a simple navigation structure

  • The navigation paths would be redundant with other prominent navigation elements

  • The page is already at the highest level of the site hierarchy (e.g., the homepage)

  • The site structure is very complex with many possible paths to the same content, making breadcrumb trails potentially confusing


Best practice guidelines

  • Represent the true hierarchy: Breadcrumbs should accurately reflect the site's information architecture, starting from the homepage and progressing to the current page.

  • Include homepage: Always include the homepage as the first item in your breadcrumb trail, establishing a clear starting point for users.

  • Make breadcrumbs clickable: Each breadcrumb (except the current page) should be a clickable link, allowing users to navigate directly to any level in the displayed hierarchy.

  • Use clear separators: Employ consistent visual separators (such as ">" or "/") between breadcrumb items to indicate the hierarchical relationship.

  • Current page treatment: The current page should be visually distinguished (e.g., by being non-clickable, bold, or a different colour) to provide clear context.

  • Keep it concise: Use short, descriptive labels for each breadcrumb item to prevent overwhelming users with text.

  • Maintain consistency: Place breadcrumbs in the same location across all pages, typically below the header and above the main content area.

  • Responsive design: Adapt breadcrumbs for smaller screens, either by truncating with ellipses, wrapping appropriately, or displaying only the immediate parent on mobile devices.

  • Limit breadcrumb levels: For very deep hierarchies, consider truncating the middle levels with an ellipsis to keep breadcrumbs manageable while still showing the path.

Variations

CivicTheme's breadcrumb component offers two primary variations:

Desktop breadcrumbs

On desktop displays, the full breadcrumb trail is shown, including all levels of the hierarchy from homepage to current page.

Mobile breadcrumbs

On mobile devices, the breadcrumb is simplified to show only the immediate parent page with a back arrow, conserving space while still providing contextual navigation.


Accessibility

According to the 'CivicTheme v1.7.0 Accessibility Assessments', the breadcrumb component meets WCAG 2.2 accessibility guidelines, with the following results:

Standard
Status
Comment

1.4.1 Use of Color (Level A)

Pass

1.4.3 Contrast (Minimum) (Level AA)

Pass

Contrast meets the minimum 4.5:1

1.4.11 Non-text Contrast (Level AA)

Pass

All user interface elements, as well as their states have a colour contrast of 3:1

1.3.1 Info and Relationships (Level A)

Pass

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text

1.4.4 Resize text (Level AA)

Pass

Text is still visible and readable when resized to at least 200%

2.1.1 Keyboard (Level A)

Pass

Elements are accessible using a keyboard only

2.4.4 Link Purpose (In Context) (Level A)

Pass

The purpose of each link can be determined from the text alone

2.4.6 Headings and Labels (Level AA)

Pass

Headings and labels describe topic or purpose

2.4.7 Focus Visible (Level AA)

Pass

Focus is visible when navigating using a keyboard

3.2.2 On Input (Level A)

Pass

Selecting a breadcrumb does not change the context of the content without notifying the user

3.2.3 Consistent Navigation (Level AA)

Pass

Where breadcrumbs are used as part of the navigation this is consistent across the website

3.2.4 Consistent Identification (Level AA)

Pass

Breadcrumbs are labelled consistently

Security

No specific security concerns have been identified for the breadcrumb component, as it primarily serves as a navigational element without handling sensitive data or user inputs.

Component inspiration and uplift

This component has been modelled after the Breadcrumbs component in the former Australian Government Design System (AGDS). CivicTheme has uplifted the component in the following ways:

  • Shortened breadcrumb trail on mobile: The breadcrumb component on mobile only displays its parent page link, similar to a "back" button. This improved mobile usability by providing contextual navigation without consuming excessive screen space.

  • Nested within the hero component: According to the Nielsen Norman Group, breadcrumbs are represented as "a trail of links at the top of the page, usually just below the global navigation." For this reason, CivicTheme's breadcrumb component has been nested within the hero component, allowing it to sit in a familiar location for users, i.e., directly below the primary navigation.

Meeting DSS requirements

The breadcrumb component helps organisations meet the Digital Service Standard requirements in several ways:

  • Criterion 3: Leave no one behind - The breadcrumb provides a clear navigation path, helping users understand where they are in the site structure, which assists with overall site orientation.

  • Criterion 4: Connect services - Breadcrumbs support a connected experience by showing relationships between content areas and supporting logical navigation paths.

  • Criterion 5: Build trust in design - Consistent breadcrumb implementation builds user confidence by providing reliable navigation cues throughout the experience.

  • Criterion 6: Don't reinvent the wheel - By using this standardised breadcrumb pattern, organisations follow established navigation conventions users already understand.


User research on this component

★★★☆☆ Confidence rating = Moderate (Informed by secondary research and design principles)

While specific user research data for CivicTheme's breadcrumb implementation is not available, the component design is informed by well-established navigation patterns and secondary research. Multiple studies have shown that breadcrumbs improve site navigation efficiency and user orientation:

  • Research has consistently shown that breadcrumbs enhance wayfinding and reduce disorientation in complex websites

  • Breadcrumbs have been proven to reduce the number of actions required to navigate to higher-level pages

  • Users typically understand breadcrumb trails without explicit instruction

  • The simplified mobile version follows research-backed principles about conserving space on small screens

More comprehensive research specific to CivicTheme's breadcrumb implementation would help further validate and optimise this component.

Known issues

  • Mobile truncation limitations: When site hierarchies are very deep, even the simplified mobile presentation may become challenging to implement effectively.

  • Screen reader experience: While the component meets WCAG guidelines, more focused testing with screen reader users would help further optimise the experience.

  • Integration with search results: The breadcrumb component may not always display optimal paths when users arrive at pages via search results rather than navigational pathways.

More research needed

  • Mobile optimisation: Additional testing of mobile breadcrumb implementations across various screen sizes and devices would help determine the most effective approaches for responsive design.

  • Screen reader testing: More comprehensive testing with users of assistive technologies would validate the accessibility of the breadcrumb implementation.

  • Breadcrumb variations: Research on different separator styles, positioning options, and truncation methods would help refine the component further.

  • Integration with analytics: Studying how users interact with breadcrumbs through analytics data would provide insights into usage patterns and effectiveness.

Help improve this component

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

  • Contribute to the breadcrumb component discussions on GitHub

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

  • Propose a change to the breadcrumb component


Resources

  • Storybook

  • Github

References

Changelog

Version
Date
Changes

1.8.0

23 Jul 2024

Renamed Breadcrumbs to Breadcrumb

1.7.0

20 Mar 2024

Updated for WCAG 2.2 compliance

1.0.0

Initial release

Component introduced

Contact us

PreviousAttachmentNextCallout

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
Nielsen Norman Group. (2017). Breadcrumbs: 11 Design Guidelines for Desktop and Mobile
Digital Transformation Agency. (2023). Digital Service Standard
World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2
Getting Help