There are a few different navigational components in eSales Lifestyle that can be integrated and used together with other components. The navigational components are aware of current states and supports UX for some navigation areas. This includes navigation trees on category and search pages, as well as breadcrumbs and a navigation assistant for mobile usage.
To integrate navigational components, the navigation structure must be known to eSales. This is defined in the Experience app and the initial set-up is assisted by Apptus personnel.
The Breadcrumb component displays the breadcrumb to the current page, provided that the page is found in the navigational structure known to eSales. This enables navigation to the different parts displayed in the breadcrumb, and are to be used on category pages. Breadcrumbs are built in to the Navigation page component but needs to be added separately on category pages with custom layouts.
The Navigation tree component displays the navigation tree as defined in the eSales Apps and enables the user to switch between different categories. It can be used with both the Primary product list component and the top level components Navigation page and Search results.
When used on a Category Page, the Navigation tree component enables navigation between different categories. If the currently visited category page exists within the navigation structure, the component also automatically selects and expands the correct parts of the navigation tree.
The Navigation tree component can also be used on search pages. When used on a search page, usage of the category navigation will not trigger navigation but only restrict the search result. When used on a search page, the Navigation tree component must have the additional attribute
search on it.
Navigation assistant trigger¶
For responsive category navigation with mobile and tablet devices, the Navigation assistant trigger component must be added to the header and made available to all pages that uses the Category navigation component. The Navigation assistant trigger component should be hidden in a desktop layout. This can be done by using CSS media queries and toggling the display mode. It is best practice to align the media queries with the breakpoint used in the Theming API v2.
<body> <nav> <header> <esales-navigation-assistant-trigger></esales-navigation-assistant-trigger> </header> </nav> </body>