Skip to content

Navigation Integration

The Category navigation component, <esales-category-navigation>, is used to enable navigation between different categories on a Category page or a Search page.

Navigation structure

A navigation structure must be defined in the Experience app to use the Category navigation component. The initial set-up of a navigation structure is performed by Apptus personnel.

Category page

On a Category page, the Category navigation component is recommended to be placed to the left of the Navigation page component, <esales-navigation-page>, in a horizontal layout. The Category navigation component should be hidden for mobile and tablet devices. This can be done by using CSS media queries and toggling the display mode.

<body>
  <main>
    <esales-category-navigation></esales-category-navigation>
    <esales-navigation-page></esales-navigation-page>
  </main>
</body>

Search page

The Search page can be extended to include a category navigation, both for desktop use and for mobile use. For desktop, this is done by adding the Category navigation component to the page with the additional attribute search on it. The component currently only supports a left aligned category tree and must be placed to the left of the Search results component, <esales-search-results>, in a horizontal layout.

<body>
  <main>
    <esales-category-navigation search></esales-category-navigation>
    <esales-search-results></esales-search-results>
  </main>
</body>

Responsive category navigation

For responsive category navigation with mobile and tablet devices, the Navigation assistant component, <esales-navigation-assistant>, must be added to the header and made available to all pages that uses the Category navigation component. The Navigation assistant 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 breakpoints in the Layout theming properties.

<body>
  <nav>
    <header>
      <esales-navigation-assistant></esales-navigation-assistant>
    </header>
  </nav>
</body>
×
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