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 navigation",
  items: [
    {
      label: "Document",
      href: "government/admin/editions/:id\"",
      current: true,
      data_attributes: {
        gtm: "document-tab"
      }
    },
    {
      label: "Attachments",
      href: "/government/admin/editions/:id/attachments\"",
      data_attributes: {
        gtm: "attachments-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