# 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 (opens new window) | Source Code (opens new window)
- A fully featured online store, which demonstrates how to connect a Category List with a Product List: Demo (opens new window) | Source Code (opens new window)
# 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. Examples:
|
| 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" |