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

Compound filters

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

Contents

  1. Component 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.

A list of compound filter items.

See macro options for items.
removeAllText string

The text to show for the 'Remove all' link.
removeAllHref string

The URL for the 'Remove all' link.
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.

The label to show for the filter item.
href string

Required.

The URL for the filter item.
title string

An optional title for the filter item.

 
{% 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: "#"
}) }}

Component status

Phase
Beta
Tested without CSS
Yes
Passed DAC audit
Not yet audied
Documentation complete
No

Back to top