← Web Components

Web Components · Blog

<mmm-blog-category>

Category-filter strip for the blog. Renders the list of blog categories from window.BlogStore as a row of pill chips (or a vertical list) and broadcasts category:selected on click so a sibling <mmm-blog-list> can filter itself.

Overview

Renders one chip per blog category plus an optional "All" chip at the start. Each chip can show a post-count badge. The active chip is driven by active-category (or auto-derived from the URL when omitted). Click → dispatches category:selected on window — <mmm-blog-list> listens for it and re-filters.

When to use

  • Above <mmm-blog-list> as the category filter.
  • In a sidebar — set layout="vertical".
  • Hidden when you already category-scope the list via the category attribute.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-blog-category variant="pills" show-count="true"></mmm-blog-category>
<mmm-blog-list></mmm-blog-list>

Attributes

AttributeTypeDefaultDescription
variantstringpillsVisual style — one of pills, buttons, tags, links, cards, tabs, dropdown, underline, minimal, bordered.
layoutstringhorizontalhorizontal (scrollable row) or vertical (stacked list).
show-countbooleantrueShow the post-count badge next to each category label.
show-allbooleantrueRender an "All" chip that resets the filter.
all-textstringAllLabel for the All chip.
active-categorystringURL-derivedSlug of the currently-selected category. When omitted, derived from the URL.

Events

EventTargetPayload
category:selectedwindow{ category: string, title: string }

Live preview

store sample-store tag <mmm-blog-category>

Examples

1. Default horizontal pills

<mmm-blog-category></mmm-blog-category>

2. Vertical sidebar list

<mmm-blog-category
  layout="vertical"
  variant="pills"
  show-count="true"
  show-all="true"
  all-text="All posts">
</mmm-blog-category>

3. Preselect a category from the URL

<mmm-blog-category active-category="how-to"></mmm-blog-category>

4. Custom filter wiring

window.addEventListener('category:selected', (e) => {
  const slug = e.detail.category;
  myList.filter(post => !slug || post.category === slug);
});