The menu is an organized list of links to other pages

Where this element can be seen?

The menu usually appears in the bottom part of the page header, and it sometimes can be seen in mobile navigation tabs at the bottom of the screen.

How should this element be designed?

The menu can have different states:

• Closed
• Open
• Hovered

Also, we have multiple levels under which content can be rendered.

desktop

mobile

Designs should represent all 3 levels with expanded and collapsed views and if animation for the menu is needed, it should be displayed in the prototype or described in the designs.

How the design may look like?

Design example #1

Design example #2

How to develop styles for this element?

The menu tree is configured in the admin panel under ScandiPWA/MenuManager.

The link can be assigned to the PLP, CMS Page, or custom URL.

The Menu component is responsible for rendering the menu. By default, it is rendered inside Header component.

The MenuItem component is responsible for rendering individual menu items.

<aside> ℹ️ Usually, styling this element takes from-to: 4-6h

</aside>

Code examples

• Menu.override.style.scss

If you need to add specific color for a certain menu element (for example red item for the SALE category), a certain class has to be added in the Menu Manager for this element and needed styles has to be applied to the FE, taking into consideration, that this part requires to BE adjustments, we consider this part to be done by the project team.

In some designs upper menu is present but moving navigation to the top is the scope of the navigation layout.

How the implementation may look like?

Implementation example #1

Implementation example #2