Managing navigation elements

This topic describes how to manage navigation elements.

Prerequisites

To start working with navigation elements, go to Content > Navigation.

Each section contains reference information. Make sure to review it before you start, or look up the necessary information as you go through the process.

Creating a navigation element

To create a navigation element:

1. On the Overview of Navigation Elements page, click +Create Navigation Element.
2. On the Create Navigation Element page, enter Name and Key.
3. Select the Active checkbox if you want to activate the navigation element.
4. Click Save. This takes you to the Overview of Navigation Elements page. You can see the message about the successful creation of the navigation element. The created navigation element is displayed in List of navigation elements.

Reference information: Creating a navigation element

On the Overview of Navigation Elements page, you see the following:

• Navigation elements: the number, name, key, and status.
• Actions that you can do to a navigation element.
• Navigation tree displaying all the navigation nodes of a selected navigation element.

The following table describes attributes on the Create Navigation Element page.

Creating a navigation node

To create a child node for a navigation element:

1. In the List of navigation elements, select the navigation element you want to create a child node for.
2. In the Create child node section:
   1. Select the node Type. To learn about the node types, see Navigation node types.
   2. Enter the required fields per each locale.
   3. Select Valid from and Valid to dates.
   4. Select the Active checkbox if you want to activate the child node.
3. Click Save.

You can see the message about the successful navigation node creation. In the Navigation tree section, the created navigation node is displayed in the navigation tree.

To create a child node for another navigation node:

1. In List of navigation elements, select the navigation element you want to create a child node for.
2. In the Navigation tree section, select the navigation node you want to create a child node for.
3. In the Edit node section, click Create child node.
4. In the Create child node section:
   1. Select the node Type. To learn about the node types, see Navigation node types.
   2. Enter the required fields per each locale.
   3. Select Valid from and Valid to dates.
   4. Select the Active checkbox if you want to activate the child node.
5. Click Save.

You can see the message about the successful navigation node creation. In the Navigation tree section, the created navigation node is displayed in the navigation tree.

Reference information: Creating a navigation node

Navigation node types

You can create the following node types:

NODE TYPE	DESCRIPTION
Label	Labels do not link to any specific URL; they are used for grouping other items accessed from the menu.
Category	Category is used to link an existing category you have to the navigation node. A category must exist in the Category section.
CMS Page	CMS page can be assigned to a node. A CMS page must exist in the Content > Pages section.
External URL	External URL is a link that is typically opened in a new tab.
Link	Link to internal pages, i.e., login, registration, etc.
Depending on the type of the node, there is various node related information that can be managed:

• Localized title (all types of nodes): This is the name of the node exactly how it will be displayed in the store (for example, if you link a category to your node, the node name can be even different from the name of the category).
• Localized custom CSS class (all types of nodes): If the class is defined in the shop, then a correct class reference will define the look and feel of the node. This is also localized, which means that for different locales, you can have different appearances for the same node.
• Active/not active (all types of nodes): If necessary, you can also completely deactivate a node. This will also make the node and the nodes below it invisible in your shop for as long as it’s inactive.
• Localized category URL (only for “Category” type): When you are assigning a category to the node, you can search by the category name to select the correct category URL you want to assign. Keep in mind that this also is localized information, so for multiple locales, you will need to make sure that you select the same category for all locales. If your category has multiple parents in the category tree, the same category can have different URLs. In this case, you will need to pick one of those URLs.
• Localized CMS page URL (only for “CMS” type): When you are assigning a CMS page to the node, you can search by the CMS page name to select the correct CMS page URL you want to assign. Keep in mind that this is also localized information, so for multiple locales, you will need to make sure that you select the same CMS page for all locales.
• Link (only for “Link” type): This is the relative path of your internal link. For example, if you would like to link a login page that is under “/login”, then this is exactly what you will use as an input for the Link field.
• External URL (only for “External URL” type): If you would like to link an external URL to your nodes, you will use this field to define the absolute URL. This could be used, for example, to link your corporate website page in your shop. Unlike internal links, the URL of the external link should be absolute, which means it needs to include the protocol as well as domain, e.g., https://mydomain.com/page

Editing a navigation node

To edit a navigation node:

1. In List of navigation elements, select the navigation element owning the navigation node you want to edit.
2. In the Navigation tree section, select the navigation node you want to edit.
3. In the Edit node section:
   1. Select the node Type. To learn about the node types, see Navigation node types.
   2. Enter the required fields per each locale.
   3. Select Valid from and Valid to dates.
   4. Select or clear the Active checkbox if you want to activate or deactivate the navigation node.
4. Click Save. You can see the message about the successful navigation node update.

Reference information: Editing a navigation node

Deleting a navigation node

To delete a navigation node:

1. In List of navigation elements, select the navigation element owning the navigation node you want to delete.
2. In the Navigation tree section, select the node you want to delete.
3. In the Edit node section, select Delete selected node. You can see the message about the successful navigation node deletion. In the Navigation tree section, the navigation node is no longer displayed.

Reordering nodes

To reorder nodes:

1. In the Navigation tree section, drag and drop elements in the tree.
2. Click Save order. You can see the message about the successful navigation tree update.

Editing, deactivating, and activating a navigation element

To edit, activate, or deactivate a navigation element:

1. In the List of navigation elements, click Edit next to the navigation element you want to edit.
2. On the Edit Navigation Element: [Element Number] page:
   1. Edit the Name.
   2. Select or clear the Active checkbox to activate or deactivate the navigation element.
3. Click Save. This takes you to the Overview of Navigation Elements page. You can see the message about the successful navigation element update. The changes are reflected in the List of navigation elements.

Reference information: Editing, deactivating, and activating a navigation element

Deleting a navigation element

To delete a navigation element:

1. In the List of navigation elements, click Delete next to the navigation element you want to delete.
2. On the Delete Navigation page, select Yes, delete this navigation. This takes you to the Overview of Navigation Elements page. You can see the message about the successful navigation element deletion. In the List of navigation elements, the navigation element is no longer displayed.

Duplicating a navigation element

To duplicate a navigation element:

1. In the List of navigation elements, click Duplicate next to the navigation element you want to duplicate.
2. On the Duplicate Navigation Element page, enter Name and Key.
3. Click Save. This takes you to the Overview of Navigation Elements page. You can see the message about the successful navigation element duplication. The duplicated element is displayed in the List of navigation elements.

Tips and tricks

• Filter the navigation elements in the List of navigation elements by entering a name or a key in the search bar above the table.
• In the Navigation tree section, filter the navigation nodes by entering a navigation node name in the search.

What’s next?

• For visual instructions on Navigation configuration, check the video: