Concept: Tag-Based Filtering with Dynamic Item Listings in Sitecore XM Cloud
Empower content authors with dynamic listings powered by SXA tags, React context, and GraphQL
Intro
In modern Sitecore XM Cloud implementations, content flexibility is essential. Editors want control over what gets shown where, but developers want scalable, composable solutions.
When you're building large-scale content structures like product catalogs, news hubs, or resource libraries, one of the key requirements is allowing users to easily filter content by category or tag—without duplicating components or hardcoding logic. This is especially true for marketing and merchandising teams who want the freedom to update featured content on the fly. Although something such as an Item Listing might be a good use case for Sitecore Search, it might not be the most practical solution for such a small component.
That’s where tag-based filtering comes in. By combining SXA Tags, React Context, and GraphQL, you can empower authors to manage taxonomy-driven listings, while keeping the front end dynamic and developer-friendly.
In this article, we walk through how to use these tools to create a flexible product listing component where authors define the tags and the front end dynamically filters the results based on user interaction.
We’ll build something like this:
The tag navigation lets the user switch between "Latest", "Best Seller", and "Featured". Products dynamically reload without a page refresh.
1. Goal & Architecture
- Allow content authors to define tag filters
- Use a navigation component to control the current tag
- Dynamically render products matching the selected tag
- Powered by SXA tags + GraphQL + React context
2. Sitecore Configuration
Product Item
- Product Name (Text)
- Price (Number)
- Image (Image field)
- Tags (SXA Tags field)
These products are stored in a bucket under /Data/Products.
Listing Data Source
- Tags to filter by (multilist from the Tags folder)
- Start search location (usually the Products bucket)
- Page size
Renderings
TaggedItemListing: renders the container + filtered resultsBasicListingNavigation: displays tag filters
The TaggedItemListing has a dedicated navigation placeholder so that BasicListingNavigation can be added optionally.
3. React State with Context
Context Setup
We use a global context to store the selected tag.
Provider
Hook to Access Context
4. Navigation Component
This renders tag pills and updates the context on click:
5. Tagged Item Listing Component
Top-Level Wrapper
Wrap the listing in the provider and expose a placeholder for the navigation:
ListingItems Component
Fetches and renders products based on selected tag:
6. GraphQL API and Server-Side Querying
GraphQL Query
API Route in Next.js
Conclusion
By combining SXA Tags, GraphQL, and React Context, you can give authors powerful tools to dynamically control content listings—without requiring new deployments or complex logic branching. This pattern not only improves the authoring experience, but also keeps your front-end code modular and scalable.
Whether you're building product catalogs, blog feeds, or content hubs, this approach strikes the right balance between flexibility and structure.
You can find a working implementation of this solution on my GitHub repo under the demo-2 folder.
Feel free to fork it, try it, and let me know what you build with it!
Made in React Bricks