{"title":"▶️ Use the menu builder","slug":"how-to-use-the-menu-builder","url":"https://support.storeconnect.com/articles/how-to-use-the-menu-builder","url_markdown":"https://support.storeconnect.com/articles/how-to-use-the-menu-builder.md","subtitle":null,"summary":"Build a custom site menu with the menu builder by creating menu items that link to pages, categories, or products, then add nested submenus with dropdown styling via CSS classes.","type":"Videos_Tutorials","video_url":"https://vimeo.com/1197535682?fl=sv\u0026fe=ci","keywords":null,"last_modified":"2026-08-21T07:12:35+0000","body_markdown":"### **1\\. Why Use the Menu Builder?**\n\n-   By default, StoreConnect builds menus based on **product categories**.\n\n-   If you want full control over your website’s menu (e.g. linking to pages like *About Us* or *Contact*), use the **Menu Builder** to create a **custom menu structure**.\n\n\n---\n\n### **2\\. Create a New Menu**\n\n-   In **Salesforce**, open the **StoreConnect app**.\n\n-   Go to:\n\n    -   **StoreConnect Navigation** → **Configuration** → **Menus** → **All Menus**.\n\n-   Click **New**.\n\n-   Configure the menu:\n\n    -   **Name** → e.g. *Main Menu*.\n\n    -   **Identifier** → a unique internal reference (e.g. `main-menu`).\n\n    -   Assign to your **Store**.\n\n-   Click **Save**.\n\n\n---\n\n### **3\\. Create Menu Items**\n\n-   From the **Main Menu Record**, go to the **Related** tab → **Menu Items** → click **New**.\n\n-   For each menu item:\n\n    -   Enter a **Name** (e.g. *Shop*, *About Us*).\n\n    -   (Optional) Enter a **Display Name** → this is what customers will see in the menu.\n\n    -   Set the **Menu** to your Main Menu.\n\n    -   Set a **Position**:\n\n        -   Lower numbers appear first (e.g. 10, 20, 30).\n\n    -   Under the **Target** section:\n\n        -   Choose where the item links to:\n\n            -   **Pages** (e.g. *About Us*, *Contact*).\n\n            -   **Products**, **Product Categories**, **Articles**, etc.\n\n-   Example:\n\n    -   **Shop** → target the **All Products** category.\n\n    -   **About Us** → target your *About Us* Page.\n\n    -   **Contact** → target your *Contact* Page.\n\n-   Click **Save and New** for each item until all are added.\n\n\n---\n\n### **4\\. Assign the Menu to Your Store**\n\n-   Go to:\n\n    -   **StoreConnect Navigation** → **Configuration** → **Stores** → **Stores List View**.\n\n-   Open your **Store Record**.\n\n-   Go to the **Content** tab → **Content Management System (CMS)**.\n\n-   Under **Header Menu**, click **Edit**.\n\n-   Select your newly created **Main Menu**.\n\n-   Click **Save**.\n\n\n---\n\n### **5\\. Verify Your New Menu**\n\n-   Go to your **Store’s website**.\n\n-   Refresh the page.\n\n-   You should now see your custom menu (e.g. Shop, About Us, Contact) visible in the **header**.\n\n\n---\n\n### **6\\. Create Nested Menus**\n\n-   To create a **submenu**:\n\n    -   Go to your **Main Menu** record → find the **child item** (e.g. *Contact*).\n\n    -   Edit the item → under **Parent Menu Item**, select its **parent** (e.g. *About Us*).\n\n    -   Click **Save**.\n\n-   Refresh your website:\n\n    -   The **Contact** link now appears **nested under** *About Us*.\n\n\n---\n\n### **7\\. Style Dropdown Menus with CSS Classes**\n\n-   To create a **dropdown effect**:\n\n    -   Edit the **Parent Menu Item** (e.g. *About Us*).\n\n    -   Under **Style Class Names**, enter:\n\n        -   `dropdown` → this uses StoreConnect's standard dropdown style.\n\n    -   Click **Save**.\n\n-   You can also:\n\n    -   Add **multiple custom classes** for more advanced styling.\n\n    -   Use **your own CSS classes** for complete customization.\n\n-   Refresh the site:\n\n    -   Hovering over *About Us* now shows a **dropdown** with *Contact* inside."}