UPMStyle Guide for Digital

Navigation and header


Navigation bar and the header area is used to display the UPM logo with primary, secondary (and in exceptional cases also tertiary) navigation and optional features such as language selection, search, user account, calls-to-action or shopping cart are displayed in right hand side action toolbar area.

The navigation bar has behaviour that hides and reveals itself based on user's up or down scroll events to display content more efficiently. On desktop and horizontal tablet screens the hover megamenu can also be used to display visual lift-ups with images. On small viewports, the main navigation compacts into dropdown.