Navigation feature overviewEdit on GitHub
The Navigation feature enables product catalog managers to create intuitive navigation elements and display them on the Storefront.
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.
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
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.
"Tree structure after the first level" template representation - Storefront
"Inline navigation" template representation - Storefront
"List navigation" template representation - Storefront
"Tree structure" template representation - Storefront
For more details on navigation, check the video:
For submitting the form