Navigation - Quick links

Use quick links to display a small number of links

Open this default quick links example in new window
Copy default quick links code 
<div class="hs2-grid-column-one-third app-latest-update quick-links-container">
  <h2 class="hs2-heading-l">Our Principles</h2>
  <ul class="hs2-quick-links__list">
    <li class="hs2-quick-links__list-item"><a class="hs2-quick-links__list-item-link" href="#">Accessibility statement</a></li>
    <li class="hs2-quick-links__list-item"><a class="hs2-quick-links__list-item-link" href="#">Cookie policy</a></li>
    <li class="hs2-quick-links__list-item"><a class="hs2-quick-links__list-item-link" href="#">Get in touch</a></li>
  </ul>
</div>
Close default quick links code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default quick links
Name Type Required Description
Name heading Type string Required true Description A header to be displayed above the links.
Name links Type array Required true Description Contains an array of footer link items.
Name links[].url Type string Required true Description Href attribute for the footer link item.
Name links[].label Type string Required true Description The label of for the footer link item.
Name classes Type string Required false Description Classes to add to the footer container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the footer container.
Copy default quick links code 
{% from 'quick-links/macro.njk' import quickLinks %}

{{ quickLinks({
  "heading": "Our Principles",
  "links": [
    {
      "URL": "#",
      "label": "Accessibility statement"
    },
    {
      "URL": "#",
      "label": "Cookie policy"
    },
    {
      "URL": "#",
      "label": "Get in touch"
    }
  ]
})}}
Close default quick links code

When to use quick links

Use quick links wherever you desire in your application to provide the users with quick navigation to different pages.

When not to use quick links

Do not use quick links on pages which aren't grouped together or "related" as this is likely to confuse users.

Do not use quick links in a transactional service or a form. We use other components instead, including:

Updated: February 2023