Desktop viewport

horizontal navigation -Medium and large viewports

Mobile viewport

Closed state

Meta navigation on an extra small viewport

Open state

Meta navigation on an extra small viewport

Sticky header - Desktop viewport

horizontal navigation -Medium and large viewports

 How it works

  • The horizontal navigation 
    1. includes first (1) and/or 
    2. second-level (2) navigation
  • 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

Crosslinks