Filter Panel is a container for your Phox Facets. Above your chosen breakpoint it sits in the page like a normal sidebar. Below it, the same filters move into an off-canvas panel that opens from a Filters button.
This demo is set to Always a panel so you can try it on any screen. Filter the real products in our demo shop, watch the footer button update its count, then close the panel with the button, the cross, Escape or a click outside.
-10%
Build the sidebar once. Filter Panel handles the small-screen version.
Drop Filter Panel into your shop layout where the sidebar should go, then add your facet elements inside it.
Choose the width at which the sidebar becomes a panel, and which side of the screen it slides in from.
Give any button the Open Class (openfilters by default). It opens the panel, and it can hide itself above the breakpoint.
Everything you need to turn a filter sidebar into a panel that works well on phones.
Above the breakpoint it is an ordinary container. At or below it, the same facets become an off-canvas panel. No duplicate filters to keep in sync.
Tablet landscape, tablet portrait, phone landscape, phone portrait, a custom pixel width, always a panel, or never.
Slide the panel in from the left, right, top or bottom of the screen.
Any element with the Open Class opens the panel, including triggers added to the page later. A Close Class works the same way.
Turn on Hide Trigger Above Breakpoint and your Filters button disappears when the sidebar is showing.
Show a footer button such as Show {count} results. The number follows the filtered loop and the button closes the panel.
Blur the page behind the open panel and set how strong the blur is.
Close with the cross, the footer button, the Escape key or a click outside. The page stops scrolling while the panel is open.
Style the on-screen sidebar and the off-screen panel separately: background, width, height, layout, padding and borders.
Anywhere a page has filters that take up too much room on a phone.
Keep a filter sidebar on desktop and a tidy Filters button on mobile.
Use it in your product category template so every category gets the same filter panel.
Set it to Always a panel for a clean shop layout where the filters slide in on demand.
Filter property, job or business listings built with Phox Facets.
Put topic and date filters for a post loop into a panel on smaller screens.
Use the bottom position for an app-style filter sheet on phones.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Becomes a Panel At | The width at or below which the container turns into a panel. Includes Custom, Always a panel and Never. | Tablet Portrait (1023px) |
| Custom Breakpoint (px) | The pixel width to use when the breakpoint is set to Custom. | 1023 |
| Panel Position | Left, right, top or bottom. | Left |
| Open Class | Any element with this class opens the panel. | openfilters |
| Hide Trigger Above Breakpoint | Hide elements with the Open Class while the sidebar is showing. | On |
| Close Class | Any element with this class closes the panel. | closefilters |
| Open In Builder | Show the panel open so you can style it. It also opens on the front end, so turn it off before publishing. | Off |
| Show Footer Bar | Add a footer with a button that closes the panel. | Off |
| Footer Button Text | Button text. Use {count} for the live results total. | Show {count} results |
| Blur Background When Open | Blur the page behind the open panel. | Off |
| Close Button Icon | The icon used for the close button. | Cross |
| Design | ||
| On-screen Div | Background colour, width, layout, padding and borders for the sidebar. | White, 100% |
| Off-screen Panel | Background colour, width, height (top and bottom panels), layout, padding and borders for the panel. | White, 360px, 80% |
| Close Button | Hide it, or set its background colour, icon colour, borders and size. | 30 |
| Footer Bar | Background colour, padding, button background, button text colour and button radius. | White, #111111, white |
| Blur Settings | Blur amount for the page behind the panel. | 5 |
Filter Panel is a container, so you can put any elements inside it. It is built for Phox Facets though, and the live count in the footer follows the filtered loop.
No. The same facets show as a sidebar above the breakpoint and inside the panel below it.
Add the Open Class to the button, openfilters by default. Any number of elements can carry the class.
Yes. Switch the builder to a breakpoint below your chosen one and turn on Open In Builder. Remember to turn it off before you publish, because it also opens the panel on the front end.
Yes. Set Becomes a Panel At to Always a panel and the filters only show when someone opens the panel, like the demo on this page.
Filter Panel is included with Phox Elements, along with 150+ other premium elements for Breakdance.
