Filter

Filter or sort items in any given layout by metadata.

The Filter component is often used together with grid component, especially the masonry grid, but it’s not bound to it. Any layout can be filtered or sorted no matter how the items are positioned. Items fade and move with smooth transitions between the different filtering and sorting states.

Usage

To apply this component, you need a container element with the data-uk-filter="target: SELECTOR" attribute. Inside this container create a list of filter controls as well as the layout items you want to filter. Use the target: SELECTOR option to select the element containing the layout items.

<div data-uk-filter="target: .js-filter">
  <!-- Filter controls -->
  <ul>
    <li><a href="#"></a></li>
  </ul>

  <!-- Layout items -->
  <ul class="js-filter">
    <li></li>
  </ul>
</div>

Next, we need to define the metadata for each layout item, for example which category the item belongs to. Use any HTML class or attribute to do so.

To apply a filter control, add the data-uk-filter-control attribute. To define the metadata that should be filtered, use the filter: SELECTOR option. The selector can be any CSS selector like an HTML class or an attribute you define for the layout items.

<div data-uk-filter="target: .js-filter">
  <ul>
    <li data-uk-filter-control="filter: .tag-blue"><a href="#"></a></li>
  </ul>

  <ul class="js-filter">
    <li class="tag-blue"></li>
  </ul>
</div>

If target is the only option in the data-uk-filter attribute value, you can also use data-uk-filter="SELECTOR". The same applies to the filter control. If filter is the only option in the data-uk-filter-control attribute value, you can also use data-uk-filter-control="SELECTOR".

<div data-uk-filter=".js-filter">
  <ul>
    <li data-uk-filter-control=".tag-blue"><a href="#"></a></li>
  </ul>

  <ul class="js-filter">
    <li class="tag-blue"></li>
  </ul>
</div>

- White
- Blue
- Black
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <ul class="uk-subnav uk-subnav-primary">
    <li data-uk-filter-control=".tag-white"><a href="#">White</a></li>
    <li data-uk-filter-control=".tag-blue"><a href="#">Blue</a></li>
    <li data-uk-filter-control=".tag-black"><a href="#">Black</a></li>
  </ul>

  <ul class="js-filter mt-4 grid grid-cols-2 gap-4 text-center md:grid-cols-3">
    <li class="tag-white">
      <div class="p-4">Item</div>
    </li>
    <li class="tag-blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li class="tag-white">
      <div class="p-4">Item</div>
    </li>
    <li class="tag-white">
      <div class="p-4">Item</div>
    </li>
    <li class="tag-black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li class="tag-black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li class="tag-blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li class="tag-black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li class="tag-blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li class="tag-white">
      <div class="p-4">Item</div>
    </li>
    <li class="tag-blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li class="tag-black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
  </ul>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <ul className="uk-subnav uk-subnav-primary">
    <li data-uk-filter-control=".tag-white"><a href="#">White</a></li>
    <li data-uk-filter-control=".tag-blue"><a href="#">Blue</a></li>
    <li data-uk-filter-control=".tag-black"><a href="#">Black</a></li>
  </ul>
  <ul className="js-filter mt-4 grid grid-cols-2 gap-4 text-center md:grid-cols-3">
    <li className="tag-white">
      <div className="p-4">Item</div>
    </li>
    <li className="tag-blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li className="tag-white">
      <div className="p-4">Item</div>
    </li>
    <li className="tag-white">
      <div className="p-4">Item</div>
    </li>
    <li className="tag-black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li className="tag-black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li className="tag-blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li className="tag-black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li className="tag-blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li className="tag-white">
      <div className="p-4">Item</div>
    </li>
    <li className="tag-blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li className="tag-black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
  </ul>
</div>

The Filter component comes unstyled, which allows you to use any of the other UIkit components to create the filter controls and layout items. For example, the Nav, Subnav and Tab components can be used to style the filter controls. Usually, the Grid component is used to create the item layout.

Animations

By default, the filter uses a slide animation for the items between the different filtering states. To apply a different animation, just add the animation option to the attribute.

Animation	Description
`slide`	Fade items out and in or slide them to their new position.
`fade`	Fade all items out and in.
`delayed-fade`	Fade items slightly delayed out and in.

<div data-uk-filter="animation: fade">…</div>

- White
- Blue
- Black
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter; animation: fade">
  <ul class="uk-subnav uk-subnav-primary">
    <li data-uk-filter-control=".tag-white"><a href="#">White</a></li>
    <li data-uk-filter-control=".tag-blue"><a href="#">Blue</a></li>
    <li data-uk-filter-control=".tag-black"><a href="#">Black</a></li>
  </ul>

  <ul class="js-filter mt-4 grid grid-cols-2 gap-4 text-center md:grid-cols-3">
    <li class="tag-white">
      <div class="p-4">Item</div>
    </li>
    <li class="tag-blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li class="tag-white">
      <div class="p-4">Item</div>
    </li>
    <li class="tag-white">
      <div class="p-4">Item</div>
    </li>
    <li class="tag-black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li class="tag-black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li class="tag-blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li class="tag-black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li class="tag-blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li class="tag-white">
      <div class="p-4">Item</div>
    </li>
    <li class="tag-blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li class="tag-black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
  </ul>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter; animation: fade">
  <ul className="uk-subnav uk-subnav-primary">
    <li data-uk-filter-control=".tag-white"><a href="#">White</a></li>
    <li data-uk-filter-control=".tag-blue"><a href="#">Blue</a></li>
    <li data-uk-filter-control=".tag-black"><a href="#">Black</a></li>
  </ul>
  <ul className="js-filter mt-4 grid grid-cols-2 gap-4 text-center md:grid-cols-3">
    <li className="tag-white">
      <div className="p-4">Item</div>
    </li>
    <li className="tag-blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li className="tag-white">
      <div className="p-4">Item</div>
    </li>
    <li className="tag-white">
      <div className="p-4">Item</div>
    </li>
    <li className="tag-black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li className="tag-black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li className="tag-blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li className="tag-black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li className="tag-blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li className="tag-white">
      <div className="p-4">Item</div>
    </li>
    <li className="tag-blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li className="tag-black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
  </ul>
</div>

Active state

Add the .uk-active class to a filter control, and the filter will be applied initially.

<li class="uk-active" data-uk-filter-control="[data-color='blue']">…</li>

- White
- Blue
- Black
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <ul class="uk-subnav uk-subnav-primary">
    <li class="uk-active" data-uk-filter-control="[data-color='white']">
      <a href="#">White</a>
    </li>
    <li data-uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li>
    <li data-uk-filter-control="[data-color='black']"><a href="#">Black</a></li>
  </ul>

  <ul class="js-filter mt-4 grid grid-cols-2 gap-4 text-center md:grid-cols-3">
    <li data-color="white">
      <div class="p-4">Item</div>
    </li>
    <li data-color="blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="white">
      <div class="p-4">Item</div>
    </li>
    <li data-color="white">
      <div class="p-4">Item</div>
    </li>
    <li data-color="black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li data-color="black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li data-color="blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li data-color="blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="white">
      <div class="p-4">Item</div>
    </li>
    <li data-color="blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
  </ul>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <ul className="uk-subnav uk-subnav-primary">
    <li className="uk-active" data-uk-filter-control="[data-color='white']">
      <a href="#">White</a>
    </li>
    <li data-uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li>
    <li data-uk-filter-control="[data-color='black']"><a href="#">Black</a></li>
  </ul>
  <ul className="js-filter mt-4 grid grid-cols-2 gap-4 text-center md:grid-cols-3">
    <li data-color="white">
      <div className="p-4">Item</div>
    </li>
    <li data-color="blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="white">
      <div className="p-4">Item</div>
    </li>
    <li data-color="white">
      <div className="p-4">Item</div>
    </li>
    <li data-color="black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li data-color="black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li data-color="blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li data-color="blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="white">
      <div className="p-4">Item</div>
    </li>
    <li data-color="blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
  </ul>
</div>

Reset filter

To reset the filter and target all items, use the data-uk-filter-control attribute without any specified selector.

<li data-uk-filter-control>…</li>

- All
- White
- Blue
- Black
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <ul class="uk-subnav uk-subnav-primary">
    <li class="uk-active" data-uk-filter-control><a href="#">All</a></li>
    <li data-uk-filter-control="[data-color='white']"><a href="#">White</a></li>
    <li data-uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li>
    <li data-uk-filter-control="[data-color='black']"><a href="#">Black</a></li>
  </ul>

  <ul class="js-filter mt-4 grid grid-cols-2 gap-4 text-center md:grid-cols-3">
    <li data-color="white">
      <div class="p-4">Item</div>
    </li>
    <li data-color="blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="white">
      <div class="p-4">Item</div>
    </li>
    <li data-color="white">
      <div class="p-4">Item</div>
    </li>
    <li data-color="black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li data-color="black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li data-color="blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li data-color="blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="white">
      <div class="p-4">Item</div>
    </li>
    <li data-color="blue">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="black">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
  </ul>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <ul className="uk-subnav uk-subnav-primary">
    <li className="uk-active" data-uk-filter-control><a href="#">All</a></li>
    <li data-uk-filter-control="[data-color='white']"><a href="#">White</a></li>
    <li data-uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li>
    <li data-uk-filter-control="[data-color='black']"><a href="#">Black</a></li>
  </ul>
  <ul className="js-filter mt-4 grid grid-cols-2 gap-4 text-center md:grid-cols-3">
    <li data-color="white">
      <div className="p-4">Item</div>
    </li>
    <li data-color="blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="white">
      <div className="p-4">Item</div>
    </li>
    <li data-color="white">
      <div className="p-4">Item</div>
    </li>
    <li data-color="black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li data-color="black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li data-color="blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li data-color="blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="white">
      <div className="p-4">Item</div>
    </li>
    <li data-color="blue">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-color="black">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
  </ul>
</div>

Metadata

Items can have different metadata for filtering. You just need to define the HTML classes or data attributes and create the corresponding CSS selectors for the filter controls. This example uses data attributes for the filter instead of HTML classes.

<div data-uk-filter="target: .js-filter">
  <ul>
    <li data-uk-filter-control="[data-tags*='blue']"><a href="#"></a></li>
  </ul>

  <ul class="js-filter">
    <li data-tags="blue dark"></li>
  </ul>
</div>

- White
- Blue
- Black
- Dark Colors
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <ul class="uk-subnav uk-subnav-primary">
    <li data-uk-filter-control="[data-tags*='white']"><a href="#">White</a></li>
    <li data-uk-filter-control="[data-tags*='blue']"><a href="#">Blue</a></li>
    <li data-uk-filter-control="[data-tags*='black']"><a href="#">Black</a></li>
    <li data-uk-filter-control="[data-tags*='dark']">
      <a href="#">Dark Colors</a>
    </li>
  </ul>

  <ul class="js-filter mt-4 grid grid-cols-2 gap-4 text-center md:grid-cols-3">
    <li data-tags="white">
      <div class="p-4">Item</div>
    </li>
    <li data-tags="blue dark">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-tags="white">
      <div class="p-4">Item</div>
    </li>
    <li data-tags="white">
      <div class="p-4">Item</div>
    </li>
    <li data-tags="black dark">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li data-tags="black dark">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li data-tags="blue dark">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-tags="black dark">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
    <li data-tags="blue dark">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-tags="white">
      <div class="p-4">Item</div>
    </li>
    <li data-tags="blue dark">
      <div class="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-tags="black dark">
      <div class="bg-black p-4 text-white">Item</div>
    </li>
  </ul>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <ul className="uk-subnav uk-subnav-primary">
    <li data-uk-filter-control="[data-tags*='white']"><a href="#">White</a></li>
    <li data-uk-filter-control="[data-tags*='blue']"><a href="#">Blue</a></li>
    <li data-uk-filter-control="[data-tags*='black']"><a href="#">Black</a></li>
    <li data-uk-filter-control="[data-tags*='dark']">
      <a href="#">Dark Colors</a>
    </li>
  </ul>
  <ul className="js-filter mt-4 grid grid-cols-2 gap-4 text-center md:grid-cols-3">
    <li data-tags="white">
      <div className="p-4">Item</div>
    </li>
    <li data-tags="blue dark">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-tags="white">
      <div className="p-4">Item</div>
    </li>
    <li data-tags="white">
      <div className="p-4">Item</div>
    </li>
    <li data-tags="black dark">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li data-tags="black dark">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li data-tags="blue dark">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-tags="black dark">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
    <li data-tags="blue dark">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-tags="white">
      <div className="p-4">Item</div>
    </li>
    <li data-tags="blue dark">
      <div className="bg-blue-500 p-4 text-blue-50">Item</div>
    </li>
    <li data-tags="black dark">
      <div className="bg-black p-4 text-white">Item</div>
    </li>
  </ul>
</div>

Multiple Filters

Define different types of metadata and add any number of controls to filter them. The filter controls are exclusive, meaning just one criterion is filtered at a time.

<div data-uk-filter="target: .js-filter">
  <ul>
    <li data-uk-filter-control="[data-color='blue']"><a href="#"></a></li>
  </ul>

  <ul>
    <li data-uk-filter-control="[data-size='small']"><a href="#"></a></li>
  </ul>

  <ul class="js-filter">
    <li data-color="blue" data-size="small"></li>
  </ul>
</div>

All
White

Blue

Black
Small

Medium

Large
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <div class="flex gap-x-4 divide-x divide-border">
    <div>
      <ul class="uk-subnav uk-subnav-primary" uk-margin>
        <li class="uk-active" data-uk-filter-control><a href="#">All</a></li>
      </ul>
    </div>
    <div>
      <ul class="uk-subnav uk-subnav-primary" uk-margin>
        <li data-uk-filter-control="[data-color='white']">
          <a href="#">White</a>
        </li>
        <li data-uk-filter-control="[data-color='blue']">
          <a href="#">Blue</a>
        </li>
        <li data-uk-filter-control="[data-color='black']">
          <a href="#">Black</a>
        </li>
      </ul>
    </div>
    <div>
      <ul class="uk-subnav uk-subnav-primary" uk-margin>
        <li data-uk-filter-control="[data-size='small']">
          <a href="#">Small</a>
        </li>
        <li data-uk-filter-control="[data-size='medium']">
          <a href="#">Medium</a>
        </li>
        <li data-uk-filter-control="[data-size='large']">
          <a href="#">Large</a>
        </li>
      </ul>
    </div>
  </div>

  <ul
    class="js-filter mt-4 grid grid-cols-2 text-center md:grid-cols-3"
    data-uk-grid="masonry: true"
  >
    <li class="p-4" data-color="white" data-size="large">
      <div class="h-96">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="blue" data-size="small">
      <div class="h-60 bg-blue-500 text-blue-50">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="white" data-size="medium">
      <div class="h-80">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="white" data-size="small">
      <div class="h-60">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="black" data-size="medium">
      <div class="h-80 bg-black text-white">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="black" data-size="small">
      <div class="h-60 bg-black text-white">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="blue" data-size="medium">
      <div class="h-80 bg-blue-500 text-blue-50">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="black" data-size="large">
      <div class="h-96 bg-black text-white">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="blue" data-size="large">
      <div class="h-96 bg-blue-500 text-blue-50">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="white" data-size="large">
      <div class="h-96">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="blue" data-size="medium">
      <div class="h-80 bg-blue-500 text-blue-50">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="black" data-size="small">
      <div class="h-60 bg-black text-white">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
  </ul>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <div className="flex gap-x-4 divide-x divide-border">
    <div>
      <ul className="uk-subnav uk-subnav-primary" uk-margin>
        <li className="uk-active" data-uk-filter-control><a href="#">All</a></li>
      </ul>
    </div>
    <div>
      <ul className="uk-subnav uk-subnav-primary" uk-margin>
        <li data-uk-filter-control="[data-color='white']">
          <a href="#">White</a>
        </li>
        <li data-uk-filter-control="[data-color='blue']">
          <a href="#">Blue</a>
        </li>
        <li data-uk-filter-control="[data-color='black']">
          <a href="#">Black</a>
        </li>
      </ul>
    </div>
    <div>
      <ul className="uk-subnav uk-subnav-primary" uk-margin>
        <li data-uk-filter-control="[data-size='small']">
          <a href="#">Small</a>
        </li>
        <li data-uk-filter-control="[data-size='medium']">
          <a href="#">Medium</a>
        </li>
        <li data-uk-filter-control="[data-size='large']">
          <a href="#">Large</a>
        </li>
      </ul>
    </div>
  </div>
  <ul className="js-filter mt-4 grid grid-cols-2 text-center md:grid-cols-3" data-uk-grid="masonry: true">
    <li className="p-4" data-color="white" data-size="large">
      <div className="h-96">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="blue" data-size="small">
      <div className="h-60 bg-blue-500 text-blue-50">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="white" data-size="medium">
      <div className="h-80">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="white" data-size="small">
      <div className="h-60">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="black" data-size="medium">
      <div className="h-80 bg-black text-white">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="black" data-size="small">
      <div className="h-60 bg-black text-white">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="blue" data-size="medium">
      <div className="h-80 bg-blue-500 text-blue-50">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="black" data-size="large">
      <div className="h-96 bg-black text-white">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="blue" data-size="large">
      <div className="h-96 bg-blue-500 text-blue-50">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="white" data-size="large">
      <div className="h-96">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="blue" data-size="medium">
      <div className="h-80 bg-blue-500 text-blue-50">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="black" data-size="small">
      <div className="h-60 bg-black text-white">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
  </ul>
</div>

Groups

To filter items by multiple criteria at the same time, the filter controls need to be grouped. Just add the group: NAME option to the data-uk-filter-control attribute and define group names for the metadata.

<div data-uk-filter="target: .js-filter">
  <ul>
    <li data-uk-filter-control="filter: [data-color='blue']; group: color">
      <a href="#"></a>
    </li>
    <li data-uk-filter-control="filter: [data-color='white']; group: color">
      <a href="#"></a>
    </li>
  </ul>

  <ul>
    <li data-uk-filter-control="filter: [data-size='small']; group: size">
      <a href="#"></a>
    </li>
    <li data-uk-filter-control="filter: [data-size='large']; group: size">
      <a href="#"></a>
    </li>
  </ul>

  <ul class="js-filter">
    <li data-color="blue" data-size="small"></li>
  </ul>
</div>

All
White

Blue

Black
Small

Medium

Large
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <div class="flex gap-x-4 divide-x divide-border">
    <div>
      <ul class="uk-subnav uk-subnav-primary" uk-margin>
        <li class="uk-active" data-uk-filter-control><a href="#">All</a></li>
      </ul>
    </div>
    <div>
      <ul class="uk-subnav uk-subnav-primary" uk-margin>
        <li
          data-uk-filter-control="filter: [data-color='white']; group: data-color"
        >
          <a href="#">White</a>
        </li>
        <li
          data-uk-filter-control="filter: [data-color='blue']; group: data-color"
        >
          <a href="#">Blue</a>
        </li>
        <li
          data-uk-filter-control="filter: [data-color='black']; group: data-color"
        >
          <a href="#">Black</a>
        </li>
      </ul>
    </div>
    <div>
      <ul class="uk-subnav uk-subnav-primary" uk-margin>
        <li data-uk-filter-control="filter: [data-size='small']; group: size">
          <a href="#">Small</a>
        </li>
        <li data-uk-filter-control="filter: [data-size='medium']; group: size">
          <a href="#">Medium</a>
        </li>
        <li data-uk-filter-control="filter: [data-size='large']; group: size">
          <a href="#">Large</a>
        </li>
      </ul>
    </div>
  </div>

  <ul
    class="js-filter mt-4 grid grid-cols-2 text-center md:grid-cols-3"
    data-uk-grid="masonry: true"
  >
    <li class="p-4" data-color="white" data-size="large">
      <div class="h-96">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="blue" data-size="small">
      <div class="h-60 bg-blue-500 text-blue-50">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="white" data-size="medium">
      <div class="h-80">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="white" data-size="small">
      <div class="h-60">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="black" data-size="medium">
      <div class="h-80 bg-black text-white">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="black" data-size="small">
      <div class="h-60 bg-black text-white">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="blue" data-size="medium">
      <div class="h-80 bg-blue-500 text-blue-50">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="black" data-size="large">
      <div class="h-96 bg-black text-white">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="blue" data-size="large">
      <div class="h-96 bg-blue-500 text-blue-50">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="white" data-size="large">
      <div class="h-96">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="blue" data-size="medium">
      <div class="h-80 bg-blue-500 text-blue-50">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
    <li class="p-4" data-color="black" data-size="small">
      <div class="h-60 bg-black text-white">
        <div class="uk-position-center">Item</div>
      </div>
    </li>
  </ul>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <div className="flex gap-x-4 divide-x divide-border">
    <div>
      <ul className="uk-subnav uk-subnav-primary" uk-margin>
        <li className="uk-active" data-uk-filter-control><a href="#">All</a></li>
      </ul>
    </div>
    <div>
      <ul className="uk-subnav uk-subnav-primary" uk-margin>
        <li data-uk-filter-control="filter: [data-color='white']; group: data-color">
          <a href="#">White</a>
        </li>
        <li data-uk-filter-control="filter: [data-color='blue']; group: data-color">
          <a href="#">Blue</a>
        </li>
        <li data-uk-filter-control="filter: [data-color='black']; group: data-color">
          <a href="#">Black</a>
        </li>
      </ul>
    </div>
    <div>
      <ul className="uk-subnav uk-subnav-primary" uk-margin>
        <li data-uk-filter-control="filter: [data-size='small']; group: size">
          <a href="#">Small</a>
        </li>
        <li data-uk-filter-control="filter: [data-size='medium']; group: size">
          <a href="#">Medium</a>
        </li>
        <li data-uk-filter-control="filter: [data-size='large']; group: size">
          <a href="#">Large</a>
        </li>
      </ul>
    </div>
  </div>
  <ul className="js-filter mt-4 grid grid-cols-2 text-center md:grid-cols-3" data-uk-grid="masonry: true">
    <li className="p-4" data-color="white" data-size="large">
      <div className="h-96">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="blue" data-size="small">
      <div className="h-60 bg-blue-500 text-blue-50">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="white" data-size="medium">
      <div className="h-80">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="white" data-size="small">
      <div className="h-60">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="black" data-size="medium">
      <div className="h-80 bg-black text-white">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="black" data-size="small">
      <div className="h-60 bg-black text-white">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="blue" data-size="medium">
      <div className="h-80 bg-blue-500 text-blue-50">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="black" data-size="large">
      <div className="h-96 bg-black text-white">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="blue" data-size="large">
      <div className="h-96 bg-blue-500 text-blue-50">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="white" data-size="large">
      <div className="h-96">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="blue" data-size="medium">
      <div className="h-80 bg-blue-500 text-blue-50">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
    <li className="p-4" data-color="black" data-size="small">
      <div className="h-60 bg-black text-white">
        <div className="uk-position-center">Item</div>
      </div>
    </li>
  </ul>
</div>

Sorting

To sort items alphanumerically, just add the sort: ATTRIBUTE option to the data-uk-filter-control attribute and define the metadata attribute by which the items should be sorted. By default, items are sorted in ascending order. Add the order: desc to sort items in descending order.

<div data-uk-filter="target: .js-filter">
  <ul>
    <li data-uk-filter-control="sort: data-color"><a href="#"></a></li>
    <li data-uk-filter-control="sort: data-color; order: desc">
      <a href="#"></a>
    </li>
  </ul>

  <ul class="js-filter">
    <li data-color="blue"></li>
  </ul>
</div>

- Asc
- Desc
- 2016-06-01
- 2016-12-13
- 2017-05-20
- 2017-09-17
- 2017-11-03
- 2017-12-25
- 2018-01-30
- 2018-02-01
- 2018-03-11
- 2018-06-13
- 2018-10-27
- 2018-12-02

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <ul class="uk-subnav uk-subnav-primary">
    <li class="uk-active" data-uk-filter-control="sort: data-date">
      <a href="#">Asc</a>
    </li>
    <li data-uk-filter-control="sort: data-date; order: desc">
      <a href="#">Desc</a>
    </li>
  </ul>

  <ul class="js-filter mt-4 grid grid-cols-2 gap-4 text-center md:grid-cols-3">
    <li data-date="2016-06-01">
      <div class="p-4">2016-06-01</div>
    </li>
    <li data-date="2016-12-13">
      <div class="bg-blue-500 p-4 text-blue-50">2016-12-13</div>
    </li>
    <li data-date="2017-05-20">
      <div class="p-4">2017-05-20</div>
    </li>
    <li data-date="2017-09-17">
      <div class="p-4">2017-09-17</div>
    </li>
    <li data-date="2017-11-03">
      <div class="bg-black p-4 text-white">2017-11-03</div>
    </li>
    <li data-date="2017-12-25">
      <div class="bg-black p-4 text-white">2017-12-25</div>
    </li>
    <li data-date="2018-01-30">
      <div class="bg-blue-500 p-4 text-blue-50">2018-01-30</div>
    </li>
    <li data-date="2018-02-01">
      <div class="bg-black p-4 text-white">2018-02-01</div>
    </li>
    <li data-date="2018-03-11">
      <div class="bg-blue-500 p-4 text-blue-50">2018-03-11</div>
    </li>
    <li data-date="2018-06-13">
      <div class="p-4">2018-06-13</div>
    </li>
    <li data-date="2018-10-27">
      <div class="bg-blue-500 p-4 text-blue-50">2018-10-27</div>
    </li>
    <li data-date="2018-12-02">
      <div class="bg-black p-4 text-white">2018-12-02</div>
    </li>
  </ul>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <ul className="uk-subnav uk-subnav-primary">
    <li className="uk-active" data-uk-filter-control="sort: data-date">
      <a href="#">Asc</a>
    </li>
    <li data-uk-filter-control="sort: data-date; order: desc">
      <a href="#">Desc</a>
    </li>
  </ul>
  <ul className="js-filter mt-4 grid grid-cols-2 gap-4 text-center md:grid-cols-3">
    <li data-date="2016-06-01">
      <div className="p-4">2016-06-01</div>
    </li>
    <li data-date="2016-12-13">
      <div className="bg-blue-500 p-4 text-blue-50">2016-12-13</div>
    </li>
    <li data-date="2017-05-20">
      <div className="p-4">2017-05-20</div>
    </li>
    <li data-date="2017-09-17">
      <div className="p-4">2017-09-17</div>
    </li>
    <li data-date="2017-11-03">
      <div className="bg-black p-4 text-white">2017-11-03</div>
    </li>
    <li data-date="2017-12-25">
      <div className="bg-black p-4 text-white">2017-12-25</div>
    </li>
    <li data-date="2018-01-30">
      <div className="bg-blue-500 p-4 text-blue-50">2018-01-30</div>
    </li>
    <li data-date="2018-02-01">
      <div className="bg-black p-4 text-white">2018-02-01</div>
    </li>
    <li data-date="2018-03-11">
      <div className="bg-blue-500 p-4 text-blue-50">2018-03-11</div>
    </li>
    <li data-date="2018-06-13">
      <div className="p-4">2018-06-13</div>
    </li>
    <li data-date="2018-10-27">
      <div className="bg-blue-500 p-4 text-blue-50">2018-10-27</div>
    </li>
    <li data-date="2018-12-02">
      <div className="bg-black p-4 text-white">2018-12-02</div>
    </li>
  </ul>
</div>

Masonry Grid

A filter is often applied to a Masonry Grid. The filter transition works perfectly with any kind of layout no matter how the items are positioned. It even works with the Parallax option from the grid.

Here is a comprehensive example with a masonry grid:

All

White

Blue

Black

Small

Medium

Large
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <div class="flex items-center justify-between">
    <div class="flex-1">
      <div class="flex gap-x-4 divide-x divide-border">
        <div>
          <ul class="uk-subnav uk-subnav-primary" uk-margin>
            <li class="uk-active" data-uk-filter-control>
              <a href="#">All</a>
            </li>
          </ul>
        </div>
        <div>
          <ul class="uk-subnav uk-subnav-primary" uk-margin>
            <li data-uk-filter-control="[data-color='white']">
              <a href="#">White</a>
            </li>
            <li data-uk-filter-control="[data-color='blue']">
              <a href="#">Blue</a>
            </li>
            <li data-uk-filter-control="[data-color='black']">
              <a href="#">Black</a>
            </li>
          </ul>
        </div>
        <div>
          <ul class="uk-subnav uk-subnav-primary" uk-margin>
            <li data-uk-filter-control="[data-size='small']">
              <a href="#">Small</a>
            </li>
            <li data-uk-filter-control="[data-size='medium']">
              <a href="#">Medium</a>
            </li>
            <li data-uk-filter-control="[data-size='large']">
              <a href="#">Large</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="flex flex-none gap-x-4">
      <span class="uk-active" data-uk-filter-control="sort: data-name">
        <a class="uk-icon-link" href="#" aria-label="Sort ascending">
          <uk-icon icon="arrow-down"></uk-icon>
        </a>
      </span>
      <span data-uk-filter-control="sort: data-name; order: desc">
        <a class="uk-icon-link" href="#" aria-label="Sort descending">
          <uk-icon icon="arrow-up"></uk-icon>
        </a>
      </span>
    </div>
  </div>

  <ul
    class="js-filter mt-4 grid grid-cols-2 text-center md:grid-cols-3"
    data-uk-grid="masonry: true"
  >
    <li class="p-4" data-name="A" data-color="white" data-size="large">
      <div class="h-96">
        <div class="uk-position-center">A</div>
      </div>
    </li>
    <li class="p-4" data-name="B" data-color="blue" data-size="small">
      <div class="h-60 bg-blue-500 text-blue-50">
        <div class="uk-position-center">B</div>
      </div>
    </li>
    <li class="p-4" data-name="C" data-color="white" data-size="medium">
      <div class="h-80">
        <div class="uk-position-center">C</div>
      </div>
    </li>
    <li class="p-4" data-name="D" data-color="white" data-size="small">
      <div class="h-60">
        <div class="uk-position-center">D</div>
      </div>
    </li>
    <li class="p-4" data-name="E" data-color="black" data-size="medium">
      <div class="h-80 bg-black text-white">
        <div class="uk-position-center">E</div>
      </div>
    </li>
    <li class="p-4" data-name="F" data-color="black" data-size="small">
      <div class="h-60 bg-black text-white">
        <div class="uk-position-center">F</div>
      </div>
    </li>
    <li class="p-4" data-name="G" data-color="blue" data-size="medium">
      <div class="h-80 bg-blue-500 text-blue-50">
        <div class="uk-position-center">G</div>
      </div>
    </li>
    <li class="p-4" data-name="H" data-color="black" data-size="large">
      <div class="h-96 bg-black text-white">
        <div class="uk-position-center">H</div>
      </div>
    </li>
    <li class="p-4" data-name="I" data-color="blue" data-size="large">
      <div class="h-96 bg-blue-500 text-blue-50">
        <div class="uk-position-center">I</div>
      </div>
    </li>
    <li class="p-4" data-name="J" data-color="white" data-size="large">
      <div class="h-96">
        <div class="uk-position-center">J</div>
      </div>
    </li>
    <li class="p-4" data-name="K" data-color="blue" data-size="medium">
      <div class="h-80 bg-blue-500 text-blue-50">
        <div class="uk-position-center">K</div>
      </div>
    </li>
    <li class="p-4" data-name="L" data-color="black" data-size="small">
      <div class="h-60 bg-black text-white">
        <div class="uk-position-center">L</div>
      </div>
    </li>
  </ul>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div data-uk-filter="target: .js-filter">
  <div className="flex items-center justify-between">
    <div className="flex-1">
      <div className="flex gap-x-4 divide-x divide-border">
        <div>
          <ul className="uk-subnav uk-subnav-primary" uk-margin>
            <li className="uk-active" data-uk-filter-control>
              <a href="#">All</a>
            </li>
          </ul>
        </div>
        <div>
          <ul className="uk-subnav uk-subnav-primary" uk-margin>
            <li data-uk-filter-control="[data-color='white']">
              <a href="#">White</a>
            </li>
            <li data-uk-filter-control="[data-color='blue']">
              <a href="#">Blue</a>
            </li>
            <li data-uk-filter-control="[data-color='black']">
              <a href="#">Black</a>
            </li>
          </ul>
        </div>
        <div>
          <ul className="uk-subnav uk-subnav-primary" uk-margin>
            <li data-uk-filter-control="[data-size='small']">
              <a href="#">Small</a>
            </li>
            <li data-uk-filter-control="[data-size='medium']">
              <a href="#">Medium</a>
            </li>
            <li data-uk-filter-control="[data-size='large']">
              <a href="#">Large</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div className="flex flex-none gap-x-4">
      <span className="uk-active" data-uk-filter-control="sort: data-name">
        <a className="uk-icon-link" href="#" aria-label="Sort ascending">
          <uk-icon icon="arrow-down" />
        </a>
      </span>
      <span data-uk-filter-control="sort: data-name; order: desc">
        <a className="uk-icon-link" href="#" aria-label="Sort descending">
          <uk-icon icon="arrow-up" />
        </a>
      </span>
    </div>
  </div>
  <ul className="js-filter mt-4 grid grid-cols-2 text-center md:grid-cols-3" data-uk-grid="masonry: true">
    <li className="p-4" data-name="A" data-color="white" data-size="large">
      <div className="h-96">
        <div className="uk-position-center">A</div>
      </div>
    </li>
    <li className="p-4" data-name="B" data-color="blue" data-size="small">
      <div className="h-60 bg-blue-500 text-blue-50">
        <div className="uk-position-center">B</div>
      </div>
    </li>
    <li className="p-4" data-name="C" data-color="white" data-size="medium">
      <div className="h-80">
        <div className="uk-position-center">C</div>
      </div>
    </li>
    <li className="p-4" data-name="D" data-color="white" data-size="small">
      <div className="h-60">
        <div className="uk-position-center">D</div>
      </div>
    </li>
    <li className="p-4" data-name="E" data-color="black" data-size="medium">
      <div className="h-80 bg-black text-white">
        <div className="uk-position-center">E</div>
      </div>
    </li>
    <li className="p-4" data-name="F" data-color="black" data-size="small">
      <div className="h-60 bg-black text-white">
        <div className="uk-position-center">F</div>
      </div>
    </li>
    <li className="p-4" data-name="G" data-color="blue" data-size="medium">
      <div className="h-80 bg-blue-500 text-blue-50">
        <div className="uk-position-center">G</div>
      </div>
    </li>
    <li className="p-4" data-name="H" data-color="black" data-size="large">
      <div className="h-96 bg-black text-white">
        <div className="uk-position-center">H</div>
      </div>
    </li>
    <li className="p-4" data-name="I" data-color="blue" data-size="large">
      <div className="h-96 bg-blue-500 text-blue-50">
        <div className="uk-position-center">I</div>
      </div>
    </li>
    <li className="p-4" data-name="J" data-color="white" data-size="large">
      <div className="h-96">
        <div className="uk-position-center">J</div>
      </div>
    </li>
    <li className="p-4" data-name="K" data-color="blue" data-size="medium">
      <div className="h-80 bg-blue-500 text-blue-50">
        <div className="uk-position-center">K</div>
      </div>
    </li>
    <li className="p-4" data-name="L" data-color="black" data-size="small">
      <div className="h-60 bg-black text-white">
        <div className="uk-position-center">L</div>
      </div>
    </li>
  </ul>
</div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option	Value	Default	Description
`target`	String		The targeted list on which to apply the filter to.
`selActive`	String, Boolean	`false`	A selector for the initially active filter controls.
`animation`	String, Boolean	`slide`	Animation mode (`slide`, `fade`, `delayed-fade` or `false`).
`duration`	Number	`250`	Animation duration in milliseconds.

target is the Primary option and its key may be omitted, if it’s the only option in the attribute value.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.filter(element, options);

Events

The following events will be triggered on elements with this component attached:

Name	Description
`beforeFilter`	Fires before the filter is applied.
`afterFilter`	Fires after the filter has been applied.

Accessibility

The Filter component automatically sets the appropriate WAI-ARIA roles, states and properties.

The filter controls have the aria-selected state.

On This Page
Usage
Animations
Active state
Reset filter
Metadata
Multiple Filters
Groups
Sorting
Masonry Grid
Component options
JavaScript
Accessibility