Logo
Logo

Filter Bar

Using the Filter Bar to Enable Isotope Filtering for Post List Elements in Breakdance

This guide demonstrates how to use the Filter Bar for Loop-based elements in Breakdance. This includes the Post List element, Post Loop Builder element, and the Products List element. The Filter Bar uses Isotope filtering, which allows users to visually filter posts based on categories, tags, or other criteria, enhancing the user experience on your website.

Please note that it is not possible to use pagination when using the Filter Bar.

Setting Up the Filter Bar

You can enable isotope filtering for any Loop-based element in Breakdance by going to the Filter Bar tab in the Properties Pane and clicking the Enable toggle.

After enabling the Filter bar, you can select the taxonomy type you want to display in the filter. You can also enable the All Filter option, which will add a default filter that shows all the posts from the Loop element’s query.

It is also possible to set the sorting order for the Filter Bar element.

Customizing the Filter Bar

In the Design Tab, you find different options for customizing the design of the  Filter Bar. This includes making the Filter Bar vertical, three different styles for the filter bar, and the position of the filter.

You can use the other design options to further customize the look and feel of the Filter Bar.