The mega menu on the desktop

The mega menu is the main menu used to navigate on sca.com. It is structured according to the hierarchy that governs the pages of the website. The mega menu must consist of only three page types. These page types are area pages, standard pages and information pages.

 

Three levels of pages are represented in the menu. In other words, pages located deeper in the page structure will not be visible in the mega menu. To reach these pages, the user needs to either click onward from pages found in the mega menu, use links in the footer or use links on the home page.

 


This example shows how the pages in the menu are organized, depending on their hierarchical position in the website’s page structure. Pulp is the overall area page for the business area. The Our offering page is below it, and the Launching SCA Pure page is below Our offering, producing the following order: Pulp > Our offering > Launching SCA Pure.

 

Functions to close the menu

The mega menu has two specific functions, which both concern how a user closes the menu. One option is to use the X symbol located at the right corner of the menu (see below). The user can also close the menu by dragging the mouse cursor outside the mega menu. When the mouse cursor moves outside the menu, it changes to an X. The X works as a button to close the mega menu, i.e. the user only needs to left-click to close the menu (see the example below). This function is only available to desktop users.

 

 

The mega menu on mobiles/tablets

The mega menu changes appearance to adapt to mobile phones and tablets. The menu is located at the top right corner of the website. Pages are displayed in the same hierarchical manner as in the desktop version of the menu.

 

The contents are displayed in a list when the menu is expanded. A plus sign icon is used to expand underlying pages. Clicking on this icon causes underlying pages to expand outward, and the plus sign is replaced by a minus sign that collapses the underlying pages again when it is clicked.

 

Breadcrumbs

The website uses breadcrumbs to help users determine their location on the site.

A list of breadcrumbs is displayed under the page’s main image. The breadcrumbs have consistent formatting on all pages except the home page, which has no breadcrumbs.

 


Example of breadcrumbs when the user is far down in the page structure.

 


Text color: N1
Hex: E6EAE9
Font: Helvetica Neue
Font weight: 200
Font size: 0.875rem
Line spacing: 1.25rem
Text transform: Upper case
Placement: Left-aligned

 

Breadcrumbs are not used on the home page. They appear when the user has moved down one level in the website’s page structure.

Breadcrumbs are not used when the width of the website is less than 992px either.

If a breadcrumb is too long, it is abbreviated in order to fit with the website layout. The example below shows how a breadcrumb is abbreviated to fit.

 

The last word/sentence of the breadcrumb is cut off when the breadcrumb exceeds 105 characters (including spaces). The last three characters displayed in the breadcrumb are replaced by an ellipsis (...).