Skip to main content Skip to list of components
Beta

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

Components

Compound filters

The compound filters can show which multiple filters have been selected. This is useful for search patterns.

Contents

  1. Status

Each selected value requires a link to be able to remove the value.

Open this example in new tab

HTML 

<ul class="tna-compound-filters">
  <li class="tna-compound-filters__item">
    <span class="tna-compound-filters__label">AIR - Air Ministry and Royal Air Force records</span>
    <a href="#" class="tna-compound-filters__link">Remove Air Ministry and Royal Air Force records filter</a>
  </li>
  <li class="tna-compound-filters__item">
    <span class="tna-compound-filters__label">Item</span>
    <a href="#" class="tna-compound-filters__link">Remove item filter</a>
  </li>
  <li class="tna-compound-filters__item">
    <span class="tna-compound-filters__label">Closed Or Retained Document, Open Description</span>
    <a href="#" class="tna-compound-filters__link">Remove filter for Closed Or Retained Document, Open Description</a>
  </li>
  <li class="tna-compound-filters__item tna-compound-filters__item--remove">
    <a href="#">
      Remove all filters
    </a>
  </li>
</ul>

Nunjucks

Nunjucks options
Primary options
Name Type Description
items array

Required.

See items.
removeAllText string
removeAllHref string
classes string

Classes to add to the compound filters.
attributes object

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

Required.

href string

Required.

title string 
{% from "nationalarchives/components/compound-filters/macro.njk" import tnaCompoundFilters %}

{{ tnaCompoundFilters({
  items: [
    {
      label: "AIR - Air Ministry and Royal Air Force records",
      href: "#",
      title: "Remove Air Ministry and Royal Air Force records filter"
    },
    {
      label: "Item",
      href: "#",
      title: "Remove item filter"
    },
    {
      label: "Closed Or Retained Document, Open Description",
      href: "#",
      title: "Remove filter for Closed Or Retained Document, Open Description"
    }
  ],
  removeAllHref: "#"
}) }}

Status

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

Back to top