Component

Document Navigation List

A list of documents used in navigation links

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "components/document_navigation_list", {
  items: [
    {
      text: "Environmental taxes, reliefs and schemes for businesses",
      path: "/green-taxes-and-reliefs"
    },
    {
      text: "Aggregates Levy: register or change your details",
      path: "/guidance/aggregates-levy-register-or-change-your-details"
    },
    {
      text: "Pay environmental taxes",
      path: "/guidance/pay-environmental-taxes"
    }
  ]
} %>

Accessibility acceptance criteria

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

Other examples

See more (preview)

A list may be truncated with an underlined “See more” link at the end

<%= render "components/document_navigation_list", {
  items: [
    {
      text: "Environmental taxes, reliefs and schemes for businesses",
      path: "/green-taxes-and-reliefs"
    },
    {
      text: "Aggregates Levy: register or change your details",
      path: "/guidance/aggregates-levy-register-or-change-your-details"
    },
    {
      text: "Pay environmental taxes",
      path: "/guidance/pay-environmental-taxes"
    }
  ],
  see_more_link: {
    text: "See more",
    path: "/more"
  }
} %>

With data attributes (preview)

Arbitrary data attributes can be included with each link, usually for analytics tracking.

<%= render "components/document_navigation_list", {
  items: [
    {
      text: "Environmental taxes, reliefs and schemes for businesses",
      path: "/green-taxes-and-reliefs",
      data_attributes: {
        track_category: "navSubtopicContentItemLinkClicked",
        track_action: 1.1,
        track_label: "/green-taxes-and-reliefs",
        track_options: {
          dimension28: 2,
          dimension29: "Environmental taxes, reliefs and schemes for businesses"
        }
      }
    },
    {
      text: "Aggregates Levy: register or change your details",
      path: "/guidance/aggregates-levy-register-or-change-your-details",
      data_attributes: {
        track_category: "navSubtopicContentItemLinkClicked",
        track_action: 1.2,
        track_label: "/guidance/aggregates-levy-register-or-change-your-details",
        track_options: {
          dimension28: 2,
          dimension29: "Aggregates Levy: register or change your details"
        }
      }
    }
  ]
} %>

With branding (preview)

Organisation colour branding can be added to the component as shown.

<%= render "components/document_navigation_list", {
  brand: "department-for-environment-food-rural-affairs",
  items: [
    {
      text: "Environmental taxes, reliefs and schemes for businesses",
      path: "/green-taxes-and-reliefs"
    },
    {
      text: "Aggregates Levy: register or change your details",
      path: "/guidance/aggregates-levy-register-or-change-your-details"
    },
    {
      text: "Pay environmental taxes",
      path: "/guidance/pay-environmental-taxes"
    }
  ],
  see_more_link: {
    text: "See more",
    path: "/more"
  }
} %>

Small version (preview)

A version of the component with a smaller font size and reduced vertical spacing.

<%= render "components/document_navigation_list", {
  small: true,
  items: [
    {
      text: "Environmental taxes, reliefs and schemes for businesses",
      path: "/green-taxes-and-reliefs"
    },
    {
      text: "Aggregates Levy: register or change your details",
      path: "/guidance/aggregates-levy-register-or-change-your-details"
    }
  ],
  see_more_link: {
    text: "See more and more and more",
    path: "/more"
  }
} %>

With margin bottom (preview)

<%= render "components/document_navigation_list", {
  items: [
    {
      text: "Environmental taxes, reliefs and schemes for businesses",
      path: "/green-taxes-and-reliefs"
    },
    {
      text: "Aggregates Levy: register or change your details",
      path: "/guidance/aggregates-levy-register-or-change-your-details"
    },
    {
      text: "Pay environmental taxes",
      path: "/guidance/pay-environmental-taxes"
    }
  ],
  margin_bottom: true
} %>