Application header

Guidelines

Guidelines

1. Application switch (optional)
2. Brand logo
3. Application name
4. Slot for additional elements (optional)
5. Avatar (optional)

Application switch

Use the application switch (see application) to allow users to navigate across applications. When clicking the application switch (1), a modal with a list of available applications opens.

Brand logo

Provide the brand logo (2) as SVG. The logo must be monochromatic and cannot contain strokes as it is colored during runtime depending on your chosen theme. For Siemens applications, only the Siemens logo with the brand theme is allowed.

Application name

The application name (3) shows the official name of the application. It can be extended with additional information by using the pipe character "|" and 2 spaces before and after to separate both.

Slot

We use this slot to provide additional high-level information or actions and functions which may impact the application context, e.g. mode switching. Note that overflows are not handled automatically; at breakpoint sm the slot collapses and is only accessible via the overflow icon.

We typically use the slot for:

• Log in button, if the application runs without a logged in user
• Changing the top level data context like environment, workspace, tenant or similar
• Important contextual information users should be aware of (like local times in remote access use cases)
• Access to application-wide actions like global search

Avatar

With the new modular application frame we moved the avatar from the navigation menu to the application header. This ensures the avatar has security-relevant information available at all breakpoints. Nonetheless, if you still use the basic navigation or the map navigation, the avatar is still in the navigation menu for compatibility reasons.

6. Avatar dropdown
7. User avatar
8. Top text line
9. Bottom text line

The avatar is an optional element and indicates the current logged in user. If your application doesn’t support different users or user profiles, don’t use the avatar.

Clicking the avatar opens a dropdown (6) with additional user information (7, 8, 9) and possibly other user related actions like log out, profile settings or user settings.

If your application can be used without being logged in to, you can offer access to a login process in different ways, for example:

• Show a log in button in the slot for additional elements and hide the avatar.
• Show the avatar with a placeholder image and show text in the user information section.

Options

If the application is hosted inside a framework that comes with its own header, you can omit the entire application header to avoid having two headers on top of each other. The framework’s header then provides the brand identity, the application name and other information.

Behavior

The header automatically adapts the breakpoints defined in the application.

10. Layout at breakpoint lg and md
11. Layout at breakpoint (sm)
12. Application menu icon
13. Overflow icon to access the slot content (14)
14. Slot content
15. Close icon to close the application menu
16. Application menu with the application switch icon at the top

At breakpoints "lg" and "md" the application header behaves identically. At breakpoint "sm" the layout changes in the following way:

• The application menu hides, displaying the application menu icon (12), a click opens the application menu (16).
• The application switch (if used) moves to the application menu (16).
• The brand logo disappears.
• The slot for additional elements (if used) moves to the overflow dropdown that opens on click on the overflow icon (13).

Dos and Don’ts

• Do align other slot usages for Siemens applications with our team to keep a consistent look and feel
• Do use the avatar dropdown for actions related to the current logged in user
• Don’t overload the slot with too many elements (overflows are not handled automatically)
• Don’t use the avatar if your application does not support user profiles

Development

Development

The application-header can host custom content which will be displayed on the far right side of the header.

Examples

Basic

PreviewAngularReactVueJavaScript

Avatar

Enhance the interactivity of your application-header by placing the avatar component as part of the content. This not only makes the avatar clickable, but also enables the addition of dropdown-item's directly within the avatar component.

API

Properties

Name

Description and specifications

name

Application name

Attribute:

name

Type:

string ｜ undefined

showMenu

Since 2.5.0

Controls the visibility of the menu toggle button based on the context of the application header. When the application header is utilized outside the application frame, the menu toggle button is displayed. Conversely, if the header is within the application frame, this property is ineffective.

Attribute:

show-menu

Type:

boolean ｜ undefined

Default:

false

Slots

Name

Description and specifications

logo

Location of the logo

Events

Name

Description and specifications

menuToggle

Since 2.5.0

Event emitted when the menu toggle button is clicked

Detail:

boolean

openAppSwitch

Since 3.0.0

Event emitted when the app switch button is clicked

Detail:

void