Filterable

Enable

Filterable grid powered by Shuffle.js. Items animate smoothly when filtered by category.

functions.php JS module

// Add to the softedge_js_components filter:
$components[] = 'filterable';

main.scss SCSS import

// Uncomment in child main.scss:
@import "themes/components/filterable";

Structure

Three required parts: a .filterable wrapper, a .filterable-nav with filter buttons, and a .filterable-grid containing items.

.filterable

Element Role .filterable Root wrapper — auto-detected by JS .filterable-nav Contains filter buttons [data-filter] Button attribute — category name or * for all .filterable-grid Grid container — positioned by Shuffle.js .filterable-item Grid item — positioned & animated [data-categories] Item attribute — comma-separated category list

<div class="filterable">

  <nav class="filterable-nav">
    <button data-filter="*" class="active">All</button>
    <button data-filter="design">Design</button>
    <button data-filter="dev">Development</button>
  </nav>

  <div class="filterable-grid row row-cols-1 row-cols-md-3 g-4">
    <div class="filterable-item" data-categories="design">...</div>
    <div class="filterable-item" data-categories="dev">...</div>
    <div class="filterable-item" data-categories="design, dev">...</div>
  </div>

</div>

Live Demo

Click a filter button to see items shuffle.

.filterable Interactive

Design

Development

Marketing

Design + Dev

Marketing

Design

<div class="filterable">
  <nav class="filterable-nav d-flex gap-2 mb-4">
    <button data-filter="*" class="btn btn-sm btn-primary active">All</button>
    <button data-filter="design" class="btn btn-sm btn-outline-primary">Design</button>
    <button data-filter="dev" class="btn btn-sm btn-outline-primary">Development</button>
  </nav>

  <div class="filterable-grid row row-cols-2 row-cols-md-3 g-3">
    <div class="filterable-item" data-categories="design">...</div>
    <div class="filterable-item" data-categories="dev">...</div>
    <div class="filterable-item" data-categories="design, dev">...</div>
  </div>
</div>

Multiple Categories

An item can belong to multiple categories. Separate them with commas in data-categories.

data-categories

// Single category
<div class="filterable-item" data-categories="design">...</div>

// Multiple categories — item appears in both filters
<div class="filterable-item" data-categories="design, dev">...</div>

// Show all
<button data-filter="*">All</button>

Multi-group cumulative filtering

Combine multiple filter dimensions (e.g. type AND category). Each .filterable-nav declares its own data-filter-group="name"; items are filtered by the AND of all active groups.

data-filter-group Per-nav attribute

Behavior Effect No group attr Default group is categories (backward compat with existing single-nav usage) data-filter-group="types" Nav controls the types group; items declare membership via data-types Multiple navs Each group tracks its active filter independently; result = AND across all groups data-filter="*" "All" for that group — group is ignored in the AND

<div class="filterable">

  <!-- Group 1 : types -->
  <nav class="filterable-nav" data-filter-group="types">
    <button data-filter="*" class="active">All types</button>
    <button data-filter="formation">Formation</button>
    <button data-filter="webinar">Webinar</button>
  </nav>

  <!-- Group 2 : categories (default group name) -->
  <nav class="filterable-nav" data-filter-group="categories">
    <button data-filter="*" class="active">All categories</button>
    <button data-filter="design">Design</button>
    <button data-filter="dev">Dev</button>
  </nav>

  <div class="filterable-grid row row-cols-1 row-cols-md-2 g-3">
    <!-- Item declares membership per group -->
    <div class="filterable-item"
         data-types="formation"
         data-categories="design">...</div>

    <!-- Selecting "Formation" + "Design" shows this item only -->
  </div>
</div>

Nav Styling

The active button gets the .active class automatically. Style your buttons however you like.

.active

The JS toggles .active on click. Use Bootstrap button styles, pills, or custom CSS.

// Bootstrap buttons
<button data-filter="*" class="btn btn-primary active">All</button>
<button data-filter="design" class="btn btn-outline-primary">Design</button>

// Pills / nav
<nav class="filterable-nav nav nav-pills">
  <button data-filter="*" class="nav-link active">All</button>
  <button data-filter="design" class="nav-link">Design</button>
</nav>

// Custom minimal
<nav class="filterable-nav hstack gap-3 small">
  <button data-filter="*" class="btn btn-link active">All</button>
  <button data-filter="design" class="btn btn-link">Design</button>
</nav>

Configuration

Shuffle.js defaults — no data attributes needed on the wrapper.

Defaults

Option Value Description itemSelector .filterable-item Selector for grid items speed 400 Animation duration in ms easing ease CSS transition easing

On this page