Top navigation provides global controls that help users use the product or service. It’s compromised of a collection of global functionalities that are separate from the product's structural navigation.
The top navigation should be organized to support the user’s global navigation requirements. It can be used on its own or paired with the side navigation component.
It provides three distinct locations to house your global functionality:
The service identity.
An area for global search.
On the far right of the top navigation, an area to house utility navigation (for example, "notifications").
The service identity is always the first item in the navigation.
Global search - optional
Use a search input or autosuggest component to provide the global search for the service. Use the autosuggest component when you can provide search suggestions for quick access to relevant result.
For example: Searching for “service resources”.
Utility navigation - optional
Utility navigation is a collection of controls that are separate to the services structural navigation. These are positioned in the right of the top navigation, ensuring they are always visible and easily accessed.
For example: Notifications, service settings, user profile management, and sign out.
Service specific controls - optional
Include controls that need to be always visible to your users first in the list.