> ## Documentation Index > Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Category tree styles in the shop sidebar > What shoppers see in the shop sidebar under each category tree display style, from the shop overview down to a single group. Pick a style in **Display** under **Category trees** on the **Collection page** of the theme editor. The style sets how the shop sidebar shows the trees you picked in **Select category trees**, on the shop overview at `/shop` and on every tree and group page beneath it. ![The Category trees panel with two trees in Select category trees and the Display menu open, listing its styles under Menus and Filters](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/theme-editor-category-tree-display.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=1cca00a6cdf11b9b671fcbea8ce797b3) The four styles fall into two kinds, and the **Display** menu lists them under those two headings: | Kind | Styles | What a click does | | - | - | - | | **Menus** | **Expandable menu**, **Focused menu**, **Step-by-step menu** | Opens the group's own page, with its own address and heading | | **Filters** | **Checkbox tree** | Ticks the group and adds its listings to the grid on the page the shopper is on | ## How it works A menu style sits in a block of its own at the top of the sidebar, under the search box. **Checkbox tree** sits among the filter sections instead, in a section headed **Browse**. The examples below use one store with two trees. **Shop by activity** holds **Winter**, **Cycling**, **Clothing** and **Drinkware**. **Winter** holds **Skis**, **Boots** and **Poles**, and **Skis** holds **For rent** and **Pre-owned**. **Pre-owned**, the second tree, holds **Skis** and **Bikes**. The menu screenshots show the shopper on the **Skis** page, so you can compare the styles in one spot. ### Expandable menu **Expandable menu** lists every tree in full. Each tree opens at its first level, and the path to the page the shopper is on opens down to that page. Every other branch starts folded. A group's name opens its page. The chevron at the end of a row only folds or unfolds it, so the shopper can look into another branch without leaving the page. **All**, which leads to the shop overview, stays at the top. ![The Skis page with Expandable menu in the sidebar, with All, the current group Skis and the chevron of the folded Cycling branch highlighted](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-category-tree-expandable-menu.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=a35ea0a9c0c14fce16d5ff3aab932737) Use it for a store whose trees are short enough to read in one go, with a handful of groups per level. ### Focused menu **Focused menu** shows only where the shopper is. On a group's page it lists a link one step back, the group among the groups alongside it, and the groups beneath it. Other branches and the levels further up are left out, and the breadcrumb above the grid leads back to them. On a tree's own page it lists **All**, the tree names, and the open tree's first level under its name. On the shop overview it lists **All** and the tree names. ![The Skis page with Focused menu in the sidebar, with the link back to Winter, the current group Skis and its groups For rent and Pre-owned highlighted](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-category-tree-focused-menu.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=00573f851b0bace4dfac3b2d4571b8b5) Use it for a large or deep tree, where the full list would push the filters off the screen. ### Step-by-step menu **Step-by-step menu** shows one level at a time. On a group's page it lists a link one step back and the groups beneath the group. The page heading names the group, so the list leaves it out. A group with nothing beneath it lists its siblings instead, itself marked, so the shopper can still move sideways. On a tree's page the link back reads **All** and leads to the shop overview. On the overview the sidebar lists **All** and the tree names. ![The Skis page with Step-by-step menu in the sidebar, with the link back to Winter, the page heading Skis and the groups For rent and Pre-owned highlighted](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-category-tree-step-by-step-menu.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=fbfce0cb35a49aaa710df1fd364f4225) Use it when you want shoppers to make one choice per screen, such as picking an activity first and a type second. ### Checkbox tree **Checkbox tree** turns the trees into a filter. Each tree is a checkbox row with its groups beneath it, and every row carries the number of listings behind it. The grid lists what is in any ticked group, whichever tree it is in, so each tick adds listings. The other filter sections then narrow that result. ![The shop overview with Checkbox tree in the Browse section, with Boots and Bikes ticked, a dash on Winter and two chips above the grid](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-category-tree-checkbox-tree.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=cfe0c5ff99ab03e20cba4c11c2f7ccdb) A tick covers everything beneath it, and a tree's own tick covers the whole tree. Ticking a group replaces a tick above it or beneath it, so the choice never overlaps. A row with a tick somewhere beneath it shows a dash. Each tick appears as a chip above the grid, removed with its ×. On a tree or group page, that page shows as a tick. Changing any tick there takes the shopper to the shop overview with the new set. Trees and branches start folded, except the way to a tick. A store with one tree shows it open. There is no **All** row, because unticking everything is the way back to the whole shop. Use it when shoppers compare across groups, such as two activities at once or every size of one type. > [!NOTE] > > A tree built from taxonomy categories shows the same hierarchy as the **Categories** filter. Turn **Categories** off under **Listings grid** if you show that tree as a **Checkbox tree**, so the sidebar does not offer it twice. ## Usage ### Compare the styles at each position The menu styles differ most on a group page deep in a tree. This is what each one lists at every position: | The shopper is on | Expandable menu | Focused menu | Step-by-step menu | | - | - | - | - | | The shop overview | **All**, then every tree open at its first level | **All**, then the tree names | **All**, then the tree names | | A tree's page | **All**, then every tree, this one marked | **All**, the tree names, and this tree's first level under its name | A link back to **All**, then this tree's first level | | A group's page | **All**, then every tree, the path to this group open | A link back, this group among its siblings, and its groups beneath it | A link back, then this group's groups | | A group with nothing beneath it | The same, this group marked | A link back and this group among its siblings | A link back and this group among its siblings, marked | ### Check the phone layout On a phone, the sidebar opens from **Filter and sort** above the grid. Trees start folded there in **Expandable menu** and **Checkbox tree**, so the drawer opens short. In **Expandable menu**, the way to the page the shopper is on opens once they unfold its tree. ![The Filter and sort drawer on a phone, with the trees Shop by activity and Pre-owned folded and their chevrons highlighted](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-category-tree-phone-drawer.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=4760d8b9c984e6adb0b24384c8e0af38) ### Keep the flat collections beside the trees The **Collections** filter switch under **Listings grid** controls the flat list of collections only. With a menu style, the trees sit in their own block and the **Collections** section lists your collections below. With **Checkbox tree**, the **Browse** section takes the place of **Collections** in the filter order, and the flat list follows it while the switch is on. ### Show a tree only in the header A tree you pick under **Header** but not in **Select category trees** opens at its own address, with no sidebar. To give its pages the sidebar, pick it in **Select category trees** as well. See [Category trees in the header](https://www.twicecommerce.com/docs/concepts/catalog/category-trees-in-the-header.md). ## Related articles > **[Category trees in the header](https://www.twicecommerce.com/docs/concepts/catalog/category-trees-in-the-header.md)** > > The menus the Shop link and your own navigation items open. > **[Build a category tree](https://www.twicecommerce.com/docs/guides/catalog/build-a-category-tree.md)** > > Build a tree and pick the trees your store shows. > **[Category tree](https://www.twicecommerce.com/docs/concepts/catalog/category-trees.md)** > > How groups and levels narrow your listings. > **[Theme editor: Collection page](https://www.twicecommerce.com/docs/sales-channels/online-store/theme-editor/pages/collection.md)** > > The page where the sidebar and its filters are set. > **[Offer online store filters](https://www.twicecommerce.com/docs/guides/catalog/offer-online-store-filters.md)** > > Attribute filters, which narrow what the trees gather. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.