Sort and Filter content
on Webflow with MixitUp3



MixItUp3 filtering library has another very useful premium extension called MixItUp Pagination.It increases usability and reduce excessive scrolling when dealing with large datasets of your MixItUp-powered filtered and sorted content.

Similar to other premium extensions it is not publicly available via GitHub or NPM and can only be downloaded from your account after purchase.

Disclaimer: I am NOT affiliated anyhow to the MixitUp and created this tutorial ONLY for sharing my knowledge and experience of using it within Webflow projects

Mixitup Pagination for Filtered content



Controls layout

Structure of the Mixer container stays the same. Required structure of the Dynamic Item and process of applying classes were described on previous pages.

For adding a pagination to the page with filtered content we will need another div, with class .control-pagination, where we will setup a structure, which MixItUp plugin will use for inserting its pagination controls.  

Those are independent controls so block can be placed whenever you want, before or after the container with the filtered content, your choice only depends on your design requirements.

Inside the .controls-pagination block add 2 more divs:

  • One for contain numbers of pages, should have a class .mixitup-page-list.
  • Another one for show the number of filtered elements, should have a class .mixitup-page-stats.

To add more control over the design of pagination elements, add a text element inside the .mixitup-page-list div and give it a class .mixitup-control. Style it the way you want your pagination controls look.

Then, add combo-class .mixitup-control-active to the same text element and style it the way you want the active page number looks like.

Also, feel free to style any other of divs, set desirable layout on controls block, etc.


Custom code structure:

Connecting and enabling Pagination

  1. Once you downloaded your MultiFilter extension files, you can upload it to your Dropbox or CitHub account or other cloud service and include it in your project via a script tag, right after the main MixitUp library script.">
  1. By default, Pagination functionality is disabled so that you can use MixItUp as normal, even with the extensions installed.
    To enable Pagination for your content, you need to add the pagination configuration option and set the limit items per page.
var mixer = mixitup(containerEl, {
   pagination: {
       limit: 3,

        Set desirable value of the limit parameter and publish the site.

More advanced configuration parameters and templates are available on the original plugin documentation page.

That's it! Your pagination for the filtered content should be ready.