The Categories Component displays a recursive, nested list of categories or tags. It can be used for sidebars, navigation menus, product filters, blog taxonomies, or any place where hierarchical category structures are needed.

The component supports filtering, pagination, taxonomy selection, and custom post types.

Component Options

All options are added as HTML attributes using the data-v-* syntax.

Below are the available options:

Option Description Default
start Starting offset for pagination 0
limit Number of categories to display 7
site_id Load categories from a specific site Current site
language_id Load categories for a specific language Current language
order Sorting rules (e.g., url, price asc) None
taxonomy_id Filter by taxonomy/category ID None
post_id Show only categories assigned to a specific post None
parent_id Filter by parent category (0 = top‑level) None
search Filter categories by text None
type categories or tags categories
post_type Filter by post type taxonomy (for custom posts) post
count Include number of posts in each category (true/false) false

Component Properties

Inside the component, categories are rendered using:

  • data-v-cats — container for the list
  • data-v-cat — repeatable element for each category

Each category exposes the following properties:

Property Attribute Description
name data-v-cat-name Category name
slug data-v-cat-slug URL slug
content data-v-cat-content Category description/content
url data-v-cat-url Category URL
image data-v-cat-image Category image
parent_id data-v-cat-parent_id Parent category ID (0 = top level)
item_id data-v-cat-item_id Category ID
sort_order data-v-cat-sort_order Sort order
status data-v-cat-status 1 = enabled, 0 = disabled
language_id data-v-cat-language_id Language ID for multilingual content

These properties can be used inside your HTML to build custom layouts.

HTML Example

<div class="card" 
     data-v-component-categories="sidebar" 
     data-v-type="categories" 
     data-v-limit="1000" 
     data-v-post_type="product">

  <div class="card-body">
    <h6 class="card-title">Categories</h6>

    <ul data-v-cats>
      <li data-v-cat>
        <input type="checkbox" id="c1" data-v-if="category.children > 0" />
        <label for="c1" data-v-if="category.children > 0">
          <a data-v-cat-url data-v-cat-name></a>
        </label>

        <a data-v-if="category.children = 0" 
           data-v-cat-url 
           data-v-cat-name></a>
      </li>

      <li data-v-cat>
        <a data-v-cat-url>
          <span data-v-cat-name></span>
        </a>
      </li>

      <li data-v-cat>
        <a data-v-cat-url>
          <span data-v-cat-name></span>
        </a>
      </li>
    </ul>
  </div>
</div>