Global Header

This header is part of the Commure application UI. A shell is a collection of components shared by all products within a platform. It provides a common set of interaction patterns that persist between and across products.

General guidance

The UI shell is made up of three components: The header, the left panel, and the right panel. All three can be used independently, but the components were designed to work together.

Application UI component

Header The highest level of navigation. The header can be used on its own for simple products or be used to trigger the left and right panels. Left panel An optional panel that is used for a product’s navigation. Right panel An optional panel that shows additional system level actions or content associated with a system icon in the header. UI shell components. UI shell components

For each UI shell component, left-to-right translates to product-to-global. The left side of the header contains items relevant at the product level. Moving to the right along the header, the functions become more global. Elements in the middle of the header should represent system-level controls. Elements on the right side of the header, such as the switcher, are the most global in their scope and span multiple products.

See the application layout page to learn more Commure's layout guidance.

Anatomy

The global commure header spans the full width of the viewport and is the topmost element in the browser window. Header elements are persistent throughout the product experience.

Global header components

Avatar

Commure provides an avatar on the far right of the header to indicated which user is currently logged into the platform. The user can click this avatar to view addition details of the user and to access platform specific settings.

See the avatar page to learn more about the use of avatars.

Application Switcher

The switcher provides a way for the user to easily navigate between products and systems. Recommended uses for this component include recently used apps, frequently used apps, or all apps attached to the user’s account. If the list is a manageable size, include all apps or products available on the system.

Links to related systems should also live in the switcher. If you’re building a product for IBM, your switcher should include a link to IBM.