Navigation feature overview

Edit on GitHub

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

They can create different types of navigation for different places of the shop. For example, create a fully-fledged navigation tree for main website navigation, several simple navigation lists for the footer, and any number of custom navigation elements for CMS pages.

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

navigation-element

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

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.

navigation-tree

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.

parent-child-navigation-node

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.

child-parent-navigation-node

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

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.

label-navigation-node-design

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.

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.

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:

navigation-as-content-item-schema

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.

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

tree-structure-after-the-first-level

"Inline navigation" template representation*—Storefront

inline-navigation

"List navigation" template representation*—Storefront

list-navigation

"Tree structure" template representation*—Storefront

tree-structure

For more details on navigation, check the video:

BACK OFFICE USER GUIDES
Manage navigation elements
Developer guides

Are you a developer? See Navigation feature walkthrough for developers.