Skip to main content Skip to list of components
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. 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.

See items.
stack boolean
fill boolean
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.

href string

Required.

title string
selected boolean 
{% 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"
    }
  ]
}) }}

Status

Status
In development
Tested without CSS
Yes
WCAG 2.2 AA compliant
Yes
Analytics integrated
In development
Documentation complete
No

Back to top