When setting up your storefront, planning and designing a navigation system is an important necessity to organize your storefront’s content in a way that makes sense for your customers to view products and other important information you may want to include.

Nacelle’s navigation is scoped to a single space and allows you to create different groups with menus that include a hierarchy of links, associate featured media, and add additional key-value metadata using properties.

Default menu group and menu list items

Your dashboard starts with one default navigation group, “Main Menu” and two menu items /home and /shop that appears on every space. You can add, remove, or edit the group or individual menu items from the Main Menu group tab or start fresh by following the docs below.

Adding a new menu group

In the tab area at the top of the page, you can add a "New Menu Group". A new page will be displayed where you will create the Group Title and the Group ID.

Group Title: This can be any string but must be unique from other groups
Group ID: This is for API usage and must be kebab-case format.

Once Title and ID are completed, you can save your changes and the Group will appear in the tab. You can now begin adding menu items to your group.

Adding a menu list

Now that you have created a new Menu Group begin by clicking on Add Menu Item to start your navigation system. A modal will appear, and you can start adding the details to your Menu Item.

Details: Adding a name and URL slug is required to create a menu item. They each have to be unique from another menu item. You can add a pre-defined page type to your item as an option.

Feature Media: Attach an image to your menu item by linking an image address URL. This image will be displayed as a thumbnail when the media is linked.

Menu Properties: Each menu item can contain its menu properties. There is no limit to the amount of key/value pairs you can add, but they must stay unique from one another. These properties can be useful for adding extra data to your menu items.

Once you’re done adding the details to the menu item, be sure to click Add Menu Item at the bottom of the modal to add to the group. This does not save the menu item. You must complete that action in the next step when you’re on the Menu Group page.

Editing and saving a menu group

To edit a menu group, select the group from the tabs. You can edit the Title and Group ID and each menu item. Ensure that your storefront application can accommodate changes to your navigation group IDs.

Just as adding a new menu item in your group, you can edit that same modal by clicking on the items row or its’ ellipsis menu. Specifically, from the 3 dot menu, the ability to delete an item is nested in the dropdown.

Nesting menu items

To add depth and organization to your navigation system, you can drag-and-drop items into other items to easily nest. Start by grabbing the drag handle or the entire row and moving the row horizontally of an item to nest in. Once an item is nested, the top-level item is collapsed and can be expanded to view the sub-menu.

Sub-menus are a way of organizing similar items: products, collections, and so forth, to make it easier for a customer to find what they are looking for.

Save Changes

Do not forget to save any changes made! You will be warned by the bottom save bar to either ‘Cancel’ or ‘Save Changes’ and will not be able to navigate away until either action is complete.

Adding menu group properties

Menu Group Properties can be added to the navigation group level or to individual navigation items using the key-value pairs as explained above. These properties can be useful for adding top-level data to your groups. To add or manage your Group properties, please use the right section of the group page. You can directly open the modal to add key-value pairs by clicking the ‘Add or Edit Properties’ table.

Deleting a menu group

If you must delete a Menu Group, choose the group you need to delete in the tabs. Use the button on the right of the Menu Group header, and click ‘Delete Menu Group’.

You will get a confirmation window asking if you’re sure you want to remove it. Click Remove, and you have successfully removed your Navigation Group and returned to either another available menu group or a new one.