Elements

mega menu -Medium and large viewports

Desktop view with all elements

mega menu -Medium and large viewports

Mobile viewport

Closed state

Meta navigation on an extra small viewport

First level - Open state

Meta navigation on an extra small viewport

Second level - Open state

Meta navigation on an extra small viewport

Third level - Open state

Meta navigation on an extra small viewport

Sticky header - Desktop viewport

horizontal navigation -Medium and large viewports

 How it works

  • Mega menu navigation includes first (1), second (2) and third-level (3) navigation
  • The navigation is based on the manually created standard mega menu template
  • When a second-level entry (2) is integrated into the mega template element, the child pages (3) of this entry are automatically listed
  • Up to 6 columns are available for listing second and third-level navigation elements. In the last column you can also integrate a teaser component (4)
  • The navigation menu will be display by default in Initial state only when the user is in a first level. When the user is on other level the navigation will open directly to the open state.
  • A teaser can be entered in the last column of a topic navigation entry (4)
  • Automaticly generated links "Navigation title'" and "Visit overview" (5) is available at the top of mega menu element
  • While in viewports M and L the main navigation is static and only the visible navigation items need to be loaded, the navigation in viewports XS and S is dynamically.  The whole navigation structure is available for the user, if he navigates through it.
  • Sticky header
    •  The standard header has a sticky header on the desktop view ports
    • The sticky header has the keys icons visible while the header elements are not visible
    • The sticky keys Icon appears when the header is scrolled out of view
    • The sticky header appears on hover over the Sticky keys icon and when the users scrolls towards the top of the page

How to use it

  • Keep the link labels in the main navigation short and concise, they can differ from the corresponding page headlines.
  • Keep the number of entries low.

Crosslinks

Reference for publisher

Select navigation style

AEM view - topic homepage properties

Edit mega menu navigation template

AEM view - mega menu template

Select mega menu topic entry

AEM view - mega menu template

Insert list child pages component

AEM view - mega menu template

Select topic child pages path

AEM view - mega menu template

Mega menu for Asset Management

To be able to configure the Mega Menu it's necessary to enable the Asset Management header for the websites.

Crosslinks