Recipe Index Filters
In my last article, I discussed the six common elements that make up a Recipe Index page. Today, I’ll show some examples of using filters on a Recipe Index page.
I typically do not use complex filters on a Recipe Index. These can look overwhelming and feel much slower and clunkier than quickly typing something into a search box. They can work well for sites with very large numbers of recipes (say 1,000+). They serve a small number of visitors who are looking for combinations of categories.
Fit Foodie Finds
Fit Foodie Finds has a dropdown with common categories to filter by. Here you’re unable to combine categories together — i.e. you could pick pork and be taken to the pork category, but not pick pork and something from either the Method or Diet dropdown.
The more complex combination filtering is done by clicking Go to Recipe Filter which brings up this:
Note the subtle “See More” link for categories that have many options, so people aren’t too overwhelmed. As you check the boxes, the grid automatically adjusts beneath to only show those recipes.
Kale Junkie has a filtering system on the left-hand side (on desktop). “Sort by” is a little confusing because it’s really “Filter by”:
Clicking on one of the three headings expands it out to show the filter options which can be selected in combination. Here I’ve checked dairy-free and gluten-free:
As you check the items, the grid automatically adjusts to the side to only show those recipes.
Half Baked Harvest
Half Baked Harvest has the filters on the left, but no ability to combine categories together:
The Novice Chef
The Novice Chef shows categories and subcategories in one long list, as well as the number of items in each category — helpful to give you a sense of what’s on offer.
Minimalist Baker has the filters set out across the top of the recipe index, rather than down the side. This provides more room for the grid of images:
Have you seen any other different examples of filters on a Recipe Index page?