Back to components

UI Shell


Table of Contents


The UI Shell is the component binding all things together.

The goal is to introduce a great digital experience for our users through one component.



If you do not need the left and right menubar, you can ommit those elements. However, you need to move the global feature icons to the top element.


You can have whichever logo you want in the menu bar, as long as it reflect the current application.

You can also have the name of the application to the right of it.

Example with Atlas Editor



This is an example drawer for the global settings.


The UI Shell spans the entire width of the viewport. The UI Shell is persistent troughout the user experience.

  1. Application Icon: An icon representing the current application or team.
  2. Application Name: The name of the current application.
  3. Breadcrumbs: Breadcrumbs to indicate where the user is in the navigational tree.
  4. Submenu for Page Actions: A sub menu for actions related to the current page, if required. Use the Tooltip Menu for this.
  5. Left Menubar: Reserved space for Application Navigation.
  6. Application Navigation: Reserved space to have application specific navigation.
  7. Current View Actions: Reserved space to have actions relevant to the current View.
  8. Right Menubar: Reserved space for the Global Utilities.
  9. Global Utilities: These utilities are reserved for global functions such as profile, search, help, settings and feedback.

The breadcrumbs in the UI Shell communicates the current location of the application. The breadcrumbs can also provide a Tooltip Menu for actions relevant to the current view.

It is not required to use the breadcrumbs.

Contact us, Opens in new window