# Menu Manager

In ScandiPWA, the default Magento navigation is replaced with the Scandiweb Menu Manager. Menu Manager is a necessary tool that gives additional options for creating a navigation tree.

As a site visitor, you will get convenient navigation. There can be different navigation blocks on the site, if necessary. As a store owner, you are able to create an unlimited number of navigation blocks per website or store, add menu items, set URLs for them, enable/disable, set CSS class, set the order of display.

## Creating a new menu <a href="#menumanager-creatinganewmenu" id="menumanager-creatinganewmenu"></a>

{% embed url="<https://youtu.be/UUEIsy3eDyM>" %}
How to create new menu
{% endembed %}

{% hint style="info" %}
When creating a new menu, the **root** menu item should be created in the first place. The following menu item(-s) should be assigned under the root category that you have created.
{% endhint %}

The default ScandiPWA theme supports only one menu per store.&#x20;

### To create a new menu:

#### Step 1: Add a new menu&#x20;

1. On the Admin sidebar, tap **Scandiweb**. Then under *Navigation*, choose **Menu Manager**.
2. Choose **Add New Menu** button&#x20;
3. In the **General Information** tab, enter the following information:
   1. **Menu Title**&#x20;
   2. **Menu Identifier**&#x20;
   3. **Custom Menu CSS Class** (optional)
   4. **Menu Status** to enabled or disabled&#x20;
   5. Assign the menu to the **Store** where you want the menu to be visible.&#x20;
4. Tap **Save and Continue Edit**

#### Step 2: Add assigned menu items&#x20;

1. Open the **Assigned Menu Items** tab&#x20;
2. Choose **Add Item** and fill in the following information:
   1. Enter the **Menu Item Title** that will appear on the storefront
   2. Choose the **URL Type:** Custom URL, CMS Page, or Category. Then choose the path depending on the URL Type you have chosen.&#x20;
   3. Choose the **Parent** menu item. **NOTE!** There can be only one **Root** menu item in the menu. Other menu items should be at least one lever lower.&#x20;
   4. Set **Menu Item** **Status** to **Enabled** or **Disabled.**&#x20;
3. Choose **Save**

#### Step 3: Make the menu visible on the storefront&#x20;

1. On the Admin sidebar, tap **Stores**. Then under *Settings,* choose **Configuration**.
2. Switch to the store view where you want your menu to be visible
3. In the panel on the left, under **ScandiPWA** choose **Content customization.**
4. Expand the **Header and Menu** section.
5. Change the **Menu to display** to your new menu.
6. When complete, tap **Save Config**

By default, if nothing is selected under the Menu to Display setting, ScandiPWA will use the menu with the "**new-main-menu"** identifier. &#x20;

{% hint style="warning" %}
**Caching Note**

The menu will be updated on the front-end immediately after saving, as it is part of the ScandiPWA caching solution that will invalidate caching entries for the updated content. No cache flush or any other manual operations are necessary. Content will be visible after page refresh and a new cache entry will be stored.
{% endhint %}

## Available CSS classes

In the menu manager, you can set a specific CSS class to any of your menu items. When a CSS class is applied, the menu items are rendered on the front-end based on the specific style rules that are specified in the code.

Out of the box, you can use the following CSS classes with the ScandiPWA theme:

| CSS class                            | Description                                                                                                                                                                                                       |
| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Menu-ItemFigure\_type\_hideOnDesktop | <p>When applied to the menu item, the menu item gets hidden on the desktop and is rendered on the mobile menu only.</p><p><strong>HINT!</strong> Use this class for the "SHOP ALL CATEGORY" option on mobile.</p> |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://manual.scandipwa.com/v5.3.1/progressive-web-app/menu-manager.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.