# 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

# 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.

Attribute Possible Values Description
data-reflow-type category-list Must always be set.
data-reflow-layout unstyled, 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-link URL (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.

  • data-reflow-category-link="https://example.com/categories?show={id}"
  • data-reflow-category-link="/category.html?id={id}"
data-reflow-root-category id 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"