Filter Actions

Filter Actions is a grid layout element that gives visitors intuitive controls for toggling, clearing, and applying filters — with fully responsive behavior configured per breakpoint.

What Are Filter Actions?

Filter Actions is a special element you place inside the Grid Layout Builder. It renders action buttons that control how filter panels behave across screen sizes. Instead of hardcoding filter visibility, you configure display modes per breakpoint — so desktop can show filters inline while mobile opens a slide-in drawer, all without writing code.

Key concept: Filter Actions target Filter Containers — columns in your grid layout that you mark as filter containers. The actions toggle, collapse, or overlay these containers based on the current breakpoint.

Action Types

Each Filter Actions element can contain multiple action rows. There are three action types:

Toggle

Opens or closes a target filter container. The button label and icon can change between open and closed states. A badge automatically displays the number of currently active filters.

Targets a specific filter container by ID
Supports separate label and icon for open/closed states
Active filter count badge (optional)
Per-breakpoint display mode configuration

Clear All

Resets every active facet in the grid with a single click — checkboxes, radio buttons, dropdowns, range sliders, date pickers, search inputs, autocomplete tags, sort selections, and hierarchy trees are all cleared.

Apply

Confirms the current filter selections and triggers a result fetch. After applying, any open drawer or fullscreen panel auto-closes. Useful in mobile drawer mode where you want visitors to make multiple selections before seeing results.

Display Modes

Each toggle action supports five display modes, configured independently per breakpoint (desktop, tablet, mobile):

Mode	Behavior	Trigger Button
visible	Filter container is always visible inline. Optionally sticky on scroll.	None needed
collapsible	Container toggles open/closed inline. Can be collapsed by default.	Button
drawer	Slides in as a side panel from left, right, top, or bottom. Custom width supported.	Button, FAB, or Sticky Bar
fullscreen	Full-viewport overlay panel with backdrop.	Button, FAB, or Sticky Bar
hidden	Container and trigger are completely hidden at this breakpoint.	None

Trigger Styles

When a display mode requires a trigger button (collapsible, drawer, fullscreen), you choose how the trigger appears:

Style	Description
button	Standard inline button with label and/or icon
pill	Generates one rounded pill per facet in the target container
fab	Floating Action Button pinned to the bottom-right corner of the viewport
sticky-bar	Sticky bar anchored to the viewport edge, shares space with other sticky-bar buttons
none	No trigger button shown (used with visible mode)

Responsive Breakpoints

Each toggle action has independent configuration for three breakpoints:

Breakpoint	Viewport	Default
Desktop	≥ 1024px	visible, no trigger
Tablet	768px – 1023px	collapsible, button trigger, collapsed by default
Mobile	< 768px	drawer, FAB trigger, slide from left, overlay enabled

Breakpoint Configuration Options

{
  "displayMode":        "drawer",       // visible | collapsible | drawer | fullscreen | hidden
  "triggerStyle":       "fab",          // button | pill | fab | sticky-bar | none
  "sticky":             false,          // stick container on scroll (visible mode)
  "slideDirection":     "left",         // left | right | top | bottom (drawer/fullscreen)
  "collapsedByDefault": true,           // start collapsed (collapsible mode)
  "showOverlay":        true,           // backdrop overlay (drawer/fullscreen)
  "width":              "320px",        // custom drawer width
  "overlayColor":       "rgba(0,0,0,0.5)" // overlay backdrop color
}

Setting Up Filter Containers

Before filter actions can toggle anything, you need to mark a column in your grid layout as a Filter Container:

Open the Grid Layout Builder
Create a column that holds your facet elements
Select the column and enable Filter Container in the inspector
Give it a label (e.g., "Sidebar Filters") — this appears in the action target dropdown
Add a Filter Actions element and create a toggle action targeting that container

The backend renders filter containers with data-filter-container-id attributes so the frontend JavaScript can locate and control them.

Button Layout & Styling

The Filter Actions element has global layout settings:

Button Layout: horizontal (row) or vertical (stacked)
Button Style: icon_text (both), text (label only), or icon (icon only)

Individual styling is available for buttons (typography, background, border, spacing, shadow), badges (typography, background, border), and icons (color, size) through the Element tab in the inspector.

Available Icons

Filter action buttons support 19 built-in SVG icons:

filterslidersmenuxchecksearchsettingschevron-downchevron-upchevron-leftchevron-rightarrow-downarrow-upplusminuseyelayerslistgrid

Common Patterns

Sidebar filters with mobile drawer

The most common setup: filters visible in a sidebar on desktop, collapsing into a drawer on mobile.

Create a two-column layout — left column for facets, right for the grid content
Mark the left column as a Filter Container
Add a Filter Actions element above the grid
Add a Toggle action targeting the filter container
Set Desktop to visible (no trigger)
Set Tablet to collapsible with button trigger
Set Mobile to drawer with FAB trigger, slide from left

Toggle + Clear + Apply combo

Add all three action types to one Filter Actions element for a complete mobile filter experience: a toggle to open the drawer, a clear button to reset, and an apply button to confirm and close.

FOUC Prevention

Filter Actions automatically emit inline CSS to prevent Flash of Unstyled Content. The server renders breakpoint-aware <style> blocks that mirror the JavaScript initial state, so containers start in the correct visibility mode before JavaScript runs. These styles are removed after the first paint.