The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.
Consequently, we have decided to not include support for IE in the Design Library website.
A menu that is accessed from a top bar. It is used as a main site navigation in logged-in channels.
The navigation pattern enables the user to navigate in the web channels in a frictionless way. A common navigation pattern makes it easy for the user to navigate in multiple channels. Sharing common patterns makes for a coherent and easy to understand experience.
When the user logs in for the first time, the menu is by default open and pinned. The menu opens on top of content, keeping the content width the same if closed or opened. Pinning the menu places the menu besides the content instead of op top of it, the content decrease in width, keeping 24px to each side.
If the device is more than 992px wide, the menu can be pinned. If the device is less than 576px wide, the menu will open as a takeover
The content is always centered, when the menu is open, pinned and closed. The max width of content is 1200px.
For some products more space is needed, the max width can then be 1600px or 100% (full width). If your MFE needs more space, contact the shell team.
Nexus has an additional customer menu for when a customer is open, placed under the user menu which is always there. When a customer is opened, the user menu will collapse and the customer menu will open automatically.
If you choose an MFE in the user menu, then the customer's menu will fold in and the user menu will stay folded out, the same way it would work if an MFE in the user's menu would be chosen.
Content width in iPad
Content width in mobile
Content width in desktop (pinned menu)
Content width in desktop (unpinned menu)
Close, open and pin menu
Menu opened but not pinned
Nexus user and customer menu