Component

Sub navigation

Displays a sub 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/sub_navigation", {
  items: [
    {
      label: "Nav item 1",
      href: "#",
      current: true
    },
    {
      label: "Nav item 2",
      href: "#"
    },
    {
      label: "Nav item 3",
      href: "#"
    },
    {
      label: "Nav item 4",
      href: "#"
    },
    {
      label: "Nav item 5",
      href: "#"
    },
    {
      label: "Nav item 6",
      href: "#"
    }
  ]
} %>

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