Navigation feature overview

The Navigation feature enables product catalog managers to create intuitive navigation elements and display them on the Storefront.

Navigation Element

A navigation element is a page section that contains links to shop resources, as well as external resources.

See Creating a Navigation Element to learn how a Back Office user can create a navigation element.

Navigation Element Duplication

If you have a configured navigation element in a shop and you want to use it as a basis for another navigation element, you can duplicate it. This is especially useful in a multi-shop scenario. See Duplicating a Navigation Element to learn how a Back Office user can do that.

Navigation Tree

A navigation tree is a navigation element consisting of navigation nodes structured hierarchically as an expandable tree. In the Back Office, navigation elements are displayed as navigation trees.

However, when publishing a navigation element as a content item on the Storefront, you can select a different navigation template

Navigation Node

A navigation node is a single item in a navigation element.

The following node types are available by default:

• Label: a piece of text.
• Category: links to category pages.
• CMS Page: links to CMS pages.
• Link: links to internal pages like login, registration, and so on.
• External URL: links to external URLs.

 In the context of a navigation tree, there can be child nodes and parent nodes. A child node is a navigation node that is added to another navigation node. A parent node is a navigation node that has one or more assigned child nodes.

A navigation node can be both of the parent type and the child type. For example, the parent navigation node Writing Materials from the previous screenshot can be represented as a child node as follows.

See Creating a Navigation Node to learn how a Back Office user can create navigation nodes.

Navigation Node Design

You can define the design for each navigation node separately by entering a Custom CSS class in the Back Office. The only class you can use by default is label. This class capitalizes the navigation node name.

A front-end developer can create more classes for navigation nodes.

See Creating a Navigation Node to learn how a Back office user can define a navigation node design.

Navigation Node Validity Period

You can define the time period a navigation node is valid for:

• When the validity period ends, the navigation node with its child stops being displayed on the Storefront.
• When the validity period starts, the navigation node with its child starts being displayed on the Storefront. See Creating a Navigation Node to learn how a product catalog manager can define a navigation node validity period.

Navigation as Content Item

To publish a navigation element on the Storefront, you can add it to CMS Blocks and CMS Pages as a content item. The schema shows how the Navigation feature affects content management in a Spryker shop:

See Create a Navigation Content Item to learn how a Back Office user can create a Navigation content item. See Adding Content to Storefront Pages Using Templates & Slots to learn how a marketing content manager can add content to the Storefront.

Navigation Content Item Templates

A content item template defines how a content item is displayed on the Storefront. The following templates are shipped for the Navigation content item by default:

• Tree structure after the first level - the first level of navigation nodes is displayed in a horizontal line. Hovering over an element opens a menu showing all the child nodes as a list.
• Inline navigation - the first level of navigation nodes is displayed as a list. Child nodes are not displayed.
• List navigation - the first level of navigation nodes is displayed as a list. Child nodes are not displayed.
• Tree structure - all the levels of navigation nodes are displayed as a list.

For more details on navigation, check the video: