Skip to main content Skip to list of components
Service phase: Beta

This is a new service – give us your feedback to help improve it.

Components

Quick filters

The quick filters component provides users with a list of links which act as a quick filter to content.

Contents

  1. Component status
Open this example in new tab

HTML 

<ul class="tna-quick-filters">
  <li class="tna-quick-filters__item tna-quick-filters__item--selected">
    <a href="#?filter=all" class="tna-quick-filters__link">All</a>
  </li>
  <li class="tna-quick-filters__item">
    <a href="#?filter=alpha" class="tna-quick-filters__link">Medieval (974—1485)</a>
  </li>
  <li class="tna-quick-filters__item">
    <a href="#?filter=beta" class="tna-quick-filters__link">Early Modern (1485—1714)</a>
  </li>
  <li class="tna-quick-filters__item">
    <a href="#?filter=gamma" class="tna-quick-filters__link">Georgians (1714—1837)</a>
  </li>
  <li class="tna-quick-filters__item">
    <a href="#?filter=delta" class="tna-quick-filters__link">Victorians (1837—1901)</a>
  </li>
  <li class="tna-quick-filters__item">
    <a href="#?filter=epsilon" class="tna-quick-filters__link">Early 20th century (1901—1918)</a>
  </li>
  <li class="tna-quick-filters__item">
    <a href="#?filter=zeta" class="tna-quick-filters__link">Interwar (1918—1939)</a>
  </li>
  <li class="tna-quick-filters__item">
    <a href="#?filter=eta" class="tna-quick-filters__link">Second World War (1939—1945)</a>
  </li>
  <li class="tna-quick-filters__item">
    <a href="#?filter=theta" class="tna-quick-filters__link">Postwar (1945—2000)</a>
  </li>
</ul>

Nunjucks

Nunjucks options
Primary options
Name Type Description
items array

Required.

A list of items to display as quick filters.

See macro options for items.
stack boolean

If true, stack the quick filters vertically.
classes string

Classes to add to the quick filters.
attributes object

HTML attributes (for example data attributes) to add to the quick filters.
Options for items
Name Type Description
label string

Required.

The text label for the quick filter.
href string

Required.

The URL of the quick filter item.
title string

An optional title attribute for the quick filter.
selected boolean

If true, highlight the quick filter as selected.

 
{% from "nationalarchives/components/quick-filters/macro.njk" import tnaQuickFilters %}

{{ tnaQuickFilters({
  items: [
    {
      label: "All",
      href: "#?filter=all",
      selected: true
    },
    {
      label: "Medieval (974—1485)",
      href: "#?filter=alpha"
    },
    {
      label: "Early Modern (1485—1714)",
      href: "#?filter=beta"
    },
    {
      label: "Georgians (1714—1837)",
      href: "#?filter=gamma"
    },
    {
      label: "Victorians (1837—1901)",
      href: "#?filter=delta"
    },
    {
      label: "Early 20th century (1901—1918)",
      href: "#?filter=epsilon"
    },
    {
      label: "Interwar (1918—1939)",
      href: "#?filter=zeta"
    },
    {
      label: "Second World War (1939—1945)",
      href: "#?filter=eta"
    },
    {
      label: "Postwar (1945—2000)",
      href: "#?filter=theta"
    }
  ]
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/quick-filters/macro.html" import tnaQuickFilters %}

{{ tnaQuickFilters({
  "items": [
    {
      "label": "All",
      "href": "#?filter=all",
      "selected": true
    },
    {
      "label": "Medieval (974—1485)",
      "href": "#?filter=alpha"
    },
    {
      "label": "Early Modern (1485—1714)",
      "href": "#?filter=beta"
    },
    {
      "label": "Georgians (1714—1837)",
      "href": "#?filter=gamma"
    },
    {
      "label": "Victorians (1837—1901)",
      "href": "#?filter=delta"
    },
    {
      "label": "Early 20th century (1901—1918)",
      "href": "#?filter=epsilon"
    },
    {
      "label": "Interwar (1918—1939)",
      "href": "#?filter=zeta"
    },
    {
      "label": "Second World War (1939—1945)",
      "href": "#?filter=eta"
    },
    {
      "label": "Postwar (1945—2000)",
      "href": "#?filter=theta"
    }
  ]
}) }}

Component status

Phase
Official (ready to use in production)

Back to top