Usage
Placement
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.
Logo
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.
Drawer
This is an example drawer for the global settings.
Anatomy
The UI Shell spans the entire width of the viewport. The UI Shell is persistent troughout the user experience.
- Application Icon: An icon representing the current application or team.
- Application Name: The name of the current application.
- Breadcrumbs: Breadcrumbs to indicate where the user is in the navigational tree.
- Submenu for Page Actions: A sub menu for actions related to the current page, if required. Use the Tooltip Menu for this.
- Left Menubar: Reserved space for Application Navigation.
- Application Navigation: Reserved space to have application specific navigation.
- Current View Actions: Reserved space to have actions relevant to the current View.
- Right Menubar: Reserved space for the Global Utilities.
- Global Utilities: These utilities are reserved for global functions such as profile, search, help, settings and feedback.
Breadcrumbs
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.