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 "govuk_publishing_components/components/secondary_navigation", {
  id: "nav_1234",
  aria_label: "Document navigation",
  items: [
    {
      label: "Tab 1",
      href: "#1",
      current: true,
      data_attributes: {
        gtm: "tab"
      }
    },
    {
      label: "Tab 2",
      href: "#2",
      data_attributes: {
        gtm: "tab"
      }
    },
    {
      label: "Tab 3",
      href: "#3",
      data_attributes: {
        gtm: "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