Skip to main content

Category List

The Category List component renders all categories and subcategories from your store. It can display them either as an unstyled list, or as a multi-level dropdown bar. You can use it to build navigation menus, sidebars and other UI displaying the categories of your store.

Examples​

  • Adding a basic Category List component to a page: Demo | Source Code
  • A fully featured online store, which demonstrates how to connect a Category List with a Product List: Demo | Source Code

How to Embed​

To embed this component on your website and display a list of all categories in your store, include the reflow library, and add the following tag somewhere in the <body> of your page:

<div data-reflow-type="category-list"></div>

Supported Attributes​

You can configure the category list and change the way it's rendered by specifying additional data-reflow-xxx attributes.

AttributePossible ValuesDescription
data-reflow-typecategory-listMust always be set.
data-reflow-layoutunstyled, horizontal-bar

(optional) Choose between different styles for displaying the category list. Defaults to unstyled.

Set it to horziontal-bar to display a multi-level dropdown menu with categories.

data-reflow-category-linkURL

(optional) When this parameter is set the categories from the list will link to the provided URL. A special {id} placeholder can be used, which will be replaced with the category id.

Check the Examples to see how you can link a Category List to a page with Product lists to create a navigation menu.

Examples:

data-reflow-root-categoryid of category to use as root

(optional) Use this parameter to show only a specific category and all of its subcategories. If it is not set all categories from the store will be shown.

Example: data-reflow-root-category="12345678"