Component

Side navigation

Component showing a secondary navigation in a side of the page

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "components/side_navigation", {
  aria_label: "Publisher information",
  items: [
    {
      label: "What the Beta can and cannot do",
      href: "/beta-capabilities",
      current: true,
      data_attributes: {
        tracking: "UTM-1235"
      }
    },
    {
      label: "How to use Content Publisher",
      href: "/how-to-use-publisher",
      data_attributes: {
        tracking: "UTM-1234"
      }
    },
    {
      label: "What’s new in Content Publisher",
      href: "/publisher-updates"
    }
  ]
} %>

Accessibility acceptance criteria

The component must:

• have a role of ‘navigation’ on any navigation elements inside the component
• be marked up as navigation and not as tangential content

Links in the component must:

• accept focus
• be focusable with a keyboard
• be usable with a keyboard
• indicate when they have focus
• change in appearance when touched (in the touch-down state)
• change in appearance when hovered
• be usable with touch
• be usable with voice commands
• have visible text
• have meaningful text