Overview
The "Navigation" element allows you to create a navigation bar which is essentially a collection of links, to help your customer's navigate your pages and/or store more easily:
Sections that include the navigation element can be found in the "Headers & Footers" category of the page section library or by searching for "Nav" there:
A new Navigation element can also be added to any existing section on the page by clicking on the "add element" button above/below an existing element and selecting the "Nav" element:
Navigation Bar Settings
The "Navigation" element consists of the following two elements:
Navigation Bar
Icon Section
To edit the navigation bar element, click directly on the element itself or click on the ✏️ in the top-left corner of the element that shows when hovering over it. Either action opens the Navigation settings in the sidebar:
Click on the "Navigation Settings" button from the sidebar to configure the links you'd like used in the bar. There you can:
Add new main menu link item(s). Up to 9 main menu links can be added per bar.
Set the Title of the link
Choose a Destination for the link. Destinations include:
URL - Link To A Specific URL by entering or pasting in the link
Cart - Directs to the Cart page (/cart) on your store with no product added
ZP Landing Page - Links to one of your published ZP Landing Pages
Product - Links to one of your Product Detail Pages
Home Page - Links to your store's Homepage
ZP Blog Post - Links to one of your published ZP Blog Posts
Page section - Anchor the link to a specific Section on the Same Page
Add a Nested Menu to the main menu link.
Delete the main menu link
Rearrange the main meny links via drag and drop
Main Menu Appearance
Edits to the appearance and styles of the main menu links can be done in the "Main Menu Appearance" tab in the sidebar:
The available style customizations for links are:
Regular State font formatting: Font Name, Font Size, Font Styles, Text Color and Background Color
Hover State font formatting with 3 options available: Change Opacity, Change Color, Underline
Nested Menus
A nested menu is a hierarchical navigation structure, consisting of submenus that are organized hierarchically under main menu items, providing a structured and organized way to access multiple levels of content or options.
To add a nested menu to the navigation element, follow the quick and easy steps below:
1. Click on the "Navigation Settings" button in the sidebar to open the nav link editor.
2. To add a nested menu item(s), click the "Add Nested Item" button:
Additional nested menu items can be added (up to 20) by clicking the "+ Add Nested Item" link below each new nested item added.
Once you've added the desired menu and/or nested menu items, click the Save button to save your changes.
3. In the "Nested Menu Appearance" section on the sidebar, you're able to edit all of the styles you want used for any/all nested menu(s) you may have added to your navigation bar:
The "Scrollable Text Nav + Image" element
The "Scrollable Text Nav + Image" section and element is a great choice for a mobile menu that has many navigation links included on it. Unlike other header sections that include navigation links, this one does not collapse into a hamburger menu on the mobile view.
Instead, the nav links in the menu will be visible and additional links can be accessed by swiping left and right. The image element for this section can be enabled or disabled on Desktop, Tablet or Mobile views independently.
A new scollable text nav element can also be added to any existing section on the page by clicking on the "add element" button above/below an existing element and selecting the "Scroll Nav" element:
To access the Navigation Settings in the sidebar, click on one of the links included in the element within the builder:
In the "Layout" tab of the sidebar you can also:
Show/Hide Images
Set the Image Size with presets for S/M/L
On Tablet and Mobile edit modes, there's also the option to Enable/Disable "Swipe Assist Arrows":
The Main Menu Appearance and Nested Menu Appearance tabs have the same options and settings as the Navigation Element gone over above in this help article:
Use the in-app preview mode and switch to the Tablet or Mobile view to see a preview:
