Skip to content

Navigation Integration

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.

Info

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.

<esales-breadcrumbs></esales-breadcrumbs>
<esales-primary-product-list></esales-primary-product-list>

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.

Category page

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.

<esales-navigation-tree></esales-navigation-tree>
<esales-primary-product-list></esales-primary-product-list>
<esales-navigation-tree></esales-navigation-tree>
<esales-navigation-page></esales-navigation-page>

Search page

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.

<esales-navigation-tree></esales-navigation-tree>
<esales-primary-product-list></esales-primary-product-list>
<esales-navigation-tree></esales-navigation-tree>
<esales-search-results></esales-search-results>

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>

Last update: January 22, 2021
×
Copyright

This online publication is intellectual property of Apptus Technologies. Its contents can be duplicated in part or whole, provided that a copyright label is visibly located on each copy and the copy is used in conjunction with the product described within this document.

All information found in these documents has been compiled with utmost attention to detail. However, this does not guarantee complete accuracy. Neither Apptus Technologies nor the authors shall be held liable for possible errors or the consequences thereof.

Software and hardware descriptions cited in these documents might be registered trademarks. All trade names are subject to copyright restrictions and may be registered trademarks. Apptus Technologies essentially adheres to the manufacturer’s spelling. Names of products and trademarks appearing in this document, with or without specific notation, are likewise subject to trademark and trade protection laws and may thus fall under copyright restrictions.

CLOSE