> ## 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 trees in the header > What the Shop link and your own navigation items open in the storefront header for each menu type, on desktop and on a phone. Set what your header opens under **Header** in the theme editor. Two settings show category trees there: **Type** under **Shop link**, and **Dropdown** on a navigation item whose **Page** is **Category trees**. The header picks its own trees, apart from the ones the shop sidebar shows. Leave its **Select category trees** empty and it uses **The shop's category trees**, the ones picked on the **Collection page**. ![The Shop link settings under Header, with Type set to Mega menu, one tree in Select category trees, and Links per column highlighted](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/theme-editor-header-shop-link.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=f2c8a0b96dbde210cc03f4735b33f5a7) ## How it works **Shop link** appears under **Header** once you have built a tree. It controls the header's built-in **Shop** item, and any navigation item you point at **Shop (Collections)** with no collection picked. The examples below use the same two trees throughout. **Shop by activity** holds **Winter**, **Cycling**, **Clothing** and **Drinkware**, and **Pre-owned** holds **Skis** and **Bikes**. ### Mega menu **Mega menu** opens a panel across the width of the header with one column per tree. The tree's name heads the column and opens the tree's page. Its first-level groups are listed beneath as links. A column lists as many groups as **Links per column** allows, from 3 to 20 and 8 to start with. A longer column ends in **View all**, with the number of groups, which opens the tree's page. The cap keeps the columns about even, however long one tree is. ![The Shop mega menu open, with a column per tree, the first-level groups beneath the tree name Shop by activity, and View all 4 highlighted](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-header-mega-menu.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=d363e7cdd2259cea6481d263b4551d99) Use it when the header is the main way into your catalog and each tree has few enough first-level groups to read at a glance. ### Dropdown **Dropdown** opens a short list of the tree names. Each name opens its tree's page, where the sidebar takes over. ![The Shop dropdown open, listing the tree names Shop by activity and Pre-owned](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-header-dropdown.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=673c1824de1d4eb60f6f16b56fd77fd1) Use it when you have several trees and want the header to stay compact. ### Link only **Link only** opens nothing. **Shop** is a plain link, as in a store without trees. ### Where the Shop link leads A link over one tree opens that tree's page. A link over several trees opens the shop overview at `/shop`, as long as the shop sidebar shows a tree. Where it shows none, the link opens the first tree's page instead. The Shop menu lists trees, never your flat collections. To link a collection from the header, add a navigation item with **Page** set to **Shop (Collections)** and pick it in **Collection**. ## Usage ### Add a tree as its own menu item Add a navigation item with **Add page link** under **Navigation items**, and set **Page** to **Category trees**. Pick the trees in **Select category trees**, or leave it empty for **The shop's category trees**. Then set **Dropdown**: | Dropdown | Over one tree | Over several trees | | - | - | - | | **No dropdown** | A plain link to the tree's page | Not offered | | **One level** | A list of the tree's first-level groups | A list of the tree names | | **Two levels** | A mega menu panel: each first-level group heads a column, with its own groups beneath | A mega menu panel: each tree heads a column, with its first level beneath | ![A navigation item named Activities with its two-level panel open, with Winter heading a column and Skis, Boots and Poles highlighted beneath it](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-header-nav-item-two-levels.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=3591f65656122e0b878d498e902b5d9f) **Links per column** under **Shop link** caps every mega menu column in the header, the columns of a navigation item included. Name the item in **Label**: the header shows the label, not the tree's title. Use separate items for trees shoppers think of separately, such as **Shop by activity** and **Pre-owned**, each opening its own panel. ### Open the menus from a keyboard A menu opens when the pointer rests on its link, or from the chevron beside the link. The chevron works with Enter and Space, and Escape closes the menu. A panel taller than three quarters of the screen scrolls inside itself. Following a link closes the menu. ### Check the phone layout On a phone, the header items sit in a drawer opened from the menu icon. Every row starts closed. The name opens the item's page, and the chevron at the end of the row opens what is beneath it, at every depth you set. An open row lists as many entries as **Links per column** allows, then **View all**. ![The menu drawer on a phone, with the Shop row, the opened tree row Shop by activity and its indented groups highlighted](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-header-phone-drawer.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=81b3957139fbcfb378bf0bbe9392bbae) ### Show a tree only in the header The header can open any tree, including one the shop sidebar does not show. That tree's pages open at their own address with no sidebar. Pick the tree in **Select category trees** on the **Collection page** as well to give them one. See [Category tree styles in the shop sidebar](https://www.twicecommerce.com/docs/concepts/catalog/category-tree-sidebar-styles.md). A navigation item with no tree left to cover is hidden from the header, so it never leads to a missing page. That happens when every tree it picked is deleted, or when it picks none and the shop sidebar shows none. ## Related articles > **[Category tree styles in the shop sidebar](https://www.twicecommerce.com/docs/concepts/catalog/category-tree-sidebar-styles.md)** > > The four ways the shop sidebar shows your trees. > **[Build a category tree](https://www.twicecommerce.com/docs/guides/catalog/build-a-category-tree.md)** > > Build a tree and add it to the header. > **[Category tree](https://www.twicecommerce.com/docs/concepts/catalog/category-trees.md)** > > How groups and levels narrow your listings. > **[Theme editor](https://www.twicecommerce.com/docs/sales-channels/online-store/theme-editor/overview.md)** > > The header block and the other blocks on every page. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.