When to use top bar ?
The Top bar is used to gather utility action and tools that a user will need to have access all along his journey on an interface. More generally, this component works in parallel with side navigation, which allows you to move around the different parts of the product.
Component overview
The top bar is composed of : Logo, breadcrumb, scope selector (when needed), help menu and the user panel.
- Logotype : The logotype is used to provide a visual recognition, and contributes to the brand image. It can also be used as a shortcut to return to the home page.
- Breadcrumb: The breadcrumb display a list of links showing the location of the current page in the navigational hierarchy. Combined with the in-component selector it allows the user to open a list of product and navigate between them.
- Slot: An extra slot is available if a new action need to be added inside the top bar.
- Scope selector: The scope selector should be display when there is a need to switch between different environment. It gives the possibility to search for a specific environment and see there connection between them.
- Help: The help contextual menu is user to gather several information to guide the user inside the product such as, the manual of the support contact.
- User account: The user account is accessible from the avatar with a contextual menu. It is used to gather settings such as “user settings” and the “customization” of the interface. The user account is also use to Log out or to reach the User panel.
Do / Don't
|
DO |
DON'T |
Use top bar to gather utility navigation. |
Don’t use the topbar for the global navigation. Use the side navigation instead. |