Component

Secondary navigation

Displays a secondary navigation with the current page marked accordingly

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "components/secondary_navigation", {
  aria_label: "Document",
  items: [
    {
      label: "Document summary",
      href: "/document-summary",
      current: true,
      data_attributes: {
        gtm: "summary-tab"
      }
    },
    {
      label: "Document history",
      href: "/document-history",
      data_attributes: {
        gtm: "history-tab"
      }
    }
  ]
} %>

Accessibility acceptance criteria

The component must:

• indicate that it is navigation landmark
• indicate if a navigation item links to the currently-displayed page

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