A navigation menu is a list of clickable links displayed at the top of your eCom (E-Series) Instant Site. It serves as the starting point for visitors to move around the site. Each link in the navigation menu can lead to a specific page or section on your site, to your online catalog categories, to external sites like your Instagram page, etc.

By default, your Lightspeed eCom site has a navigation menu created for the site template you chose. You can add, edit, or remove menu items to customize it.

Available on-click actions for navigation menu items on Instant Site

Navigation menu items are clickable text links. On Instant Site, each menu item can perform one of the following actions when clicked:

• Scroll to site section. Scroll to one of your site’s sections.
• Go to link. Open a link to any website that you specify.
• Compose email. Compose an email. After clicking the link, a default mail service on a visitor’s device will open ready to send a message to an email you specify.
• Call phone. Dial a number. After clicking the link, a visitor’s device will dial a number you specify.
• Go to store. Open your online catalog/store.
• Go to store category. Go to a product category that you specify.
• Go to site page. Open a page on your site that you specify.
• Show brand list. Show a dropdown with the autogenerated list of brands you have in your online catalog (available after you specify brand attributes for products).
• No action. A non-clickable menu item.

Adding items to the navigation menu on Instant Site

By default, the Instant Site template you chose already has a sample navigation menu. You can add new menu items to customize it.

On a mobile phone, the navigation bar is usually placed on your website’s top left and looks like a hamburger or, as typically referred to – a hamburger button.

To add an item to a site navigation menu:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. In the Homepage Sections list on the left, click Header & Menu (or Header for some templates).
3. Click Navigation menu to see your current navigation menu items.
4. Click Add Menu Item to add a new item or click an existing item to edit it.
5. In the Title field, enter the name that will make sense to customers. For example, About Us, Give Us a Call, etc.
6. From the Action on click dropdown, choose what action should the menu item perform and fill out the missing information. For example, specify the site section this item will scroll to, or enter an email address.
7. (optional) Switch the Add dropdown menu toggle to create a sub-menu that will appear when visitors hover over this menu item. You can set up dropdown items manually by clicking Add Item or auto-generate them based on your online catalog categories.
8. Click Back to return to the list of navigation menu items. To change their order, drag-and-drop the items to the desired position.
9. Click Back again to return to the main settings of the Header & Menu section.
10. Switch to the Design tab to select the layout for your navigation menu and choose a custom background color and font for it.
11. Click Publish.

That’s it. You’ve added a new item to the top navigation menu on Instant Site.

Adding dropdowns to the navigation menu on Instant Site

You can add nested dropdowns to items in your Instant Site navigation menu to help visitors browse your website. For example, if you have a large catalog that requires a multi-level menu, or you need to share information about your company, like related services or documentation.

Dropdowns appear as sub-menus when visitors hover over a navigation menu item:

There are three options for adding dropdowns to navigation menu items:

• Creating custom dropdowns. You set up items in the dropdown manually and can combine different item types. A dropdown can have up to 3 levels of links, with up to 20 items on each level. Custom dropdowns allow you to create any sub-menu you like. For example, you can take a non-clickable menu item, name it “Brands”, then add a custom dropdown where each item will lead to a dedicated category in your online catalog.

• Generating dropdowns based on your online catalog categories. The dropdown menu is automatically filled with links to the root categories of your online catalog and/or their subcategories. An autogenerated dropdown can have up to 3 levels of links, with up to 20 items on each level. Generating dropdowns based on your online catalog categories is supported for menu items with the Go to store and Go to store category types.

  If your online catalog has subcategories with more than 3 levels like Accessoires → Hats → Panamas → Classic, the top menu will display only Accessoires → Hats → Panamas.

• Generating a dropdown based on the brand attributes in your online catalog. A one-level dropdown is automatically created based on brand attributes in your online catalog. It can have up to 30 brands filtered in alphabetical order. Clicking a brand opens a page with the list of all products from that brand. If you have more than 30 brands, eCom includes the ones with the most products in the dropdown.
  Generating a dropdown based on brand attributes is supported only for the Show brand list menu item type.

To add a dropdown to a site navigation menu item:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. In the menu on the left, click Header & Menu (or Header).
3. Click Navigation menu, then click an existing menu item to edit it.
4. Choose your option:
   • To create a custom dropdown, turn on the Add dropdown menu toggle, then click Add Item. You will need to add all menu items manually, including entering their titles, choosing the action on click, etc.
   • To create a dropdown automatically based on your online catalog categories, turn on the Add dropdown menu toggle, then turn on the Auto-generate dropdown toggle.
   • To generate a dropdown based on the brand attributes in your online catalog, choose Show brand list from the Action on click dropdown for this menu item.
5. Click Publish.

That’s it. You’ve added a nested dropdown to the navigation menu item on your Instant Site.

Editing an item in the navigation menu on Instant Site

You can edit items in the navigation menu on your Instant Site to update the menu contents.

To edit an item in the navigation menu:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. In the menu on the left, click Header & Menu.
3. In the Content tab, click Navigation menu.
4. Click the item that you want to edit.
5. Make changes to item title, action on click, etc.
6. (optional) Add a dropdown to this menu item or edit existing dropdown items.
7. Click Publish.

To edit items in the navigation menu dropdowns generated automatically based on categories or brand attributes, make changes to your online catalog categories or attributes in Retail POS (for example, add more categories or assign products to them). Editing autogenerated dropdowns in the Instant Site editor is not supported.

Removing an item from the navigation menu on Instant Site

You can delete a link from the navigation menu if you no longer need it. Deleting a menu item will also delete all the nested dropdowns added to it.

To delete an item from the navigation menu:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. In the menu on the left, click Header & Menu.
3. In the Content tab, click Navigation menu.
4. Click the item that you don’t want to show anymore. For example, Store.
5. Click Delete Menu Item at the bottom of the page.
6. Click Publish.