Global Header and Product Menu

Important Links

Contents

Global Header Shared Elements

Open

Each product will have its own nuanced version of the global header, but will still feel like the same family of products. The following elements will exist in every instance of the global header (although they may be be positioned in different locations in some cases)

1. Product Switcher Icon Button + Menu

2. Product Menu Button

3. Navigator Icon Buttons (Desktop app only)

4. Help Icon Button

5. Settings Icon Button

6. User Avatar + Menu

Product Menu Button

The Product Menu Button is a global control that will give users access to open other products in the “Mattermost Suite”. Tapping this button will open a popover menu where the core products can be accessed.

• The core products will each open in a new tab as indicated by the open in new tab icon.

• The active product is identified by a checkmark.

Open

Product Brand Identifier

Each product in the suite will display a product branding identifier next to the product switcher. This will help ensure users are oriented and that they land where they expect when switching between products.

Help

The existing Help Icon Button and associated menu move out of the Channel Header and into the Global Header.

Account Avatar

The authenticated user’s avatar, accompanying status menu and other account-related items move to a new Account Menu in the Global Header. Custom Statuses will also display next to the user’s avatar here.

Default State

With Custom Status Showing

Account Menu Open

Messaging Global Header

In addition to the standard shared elements of the global header, the Messaging Global Header will house the following elements:

1. Search

2. Recent Mentions

3. Saved Messages

Search

Search will be moved out of the Channel Header and into the global header. When users engage the Search input, a new Search popover displays. This will make way for the vision of a ‘Command Palette’ in the future.

Ideally, we’d like to fit ‘Recent Searches' into this popover as well if it can be included in Phase 1.

Default State

Open State

Recent Mentions Icon Button

Access to Recent Mentions is moved out of the Channel Header and into the Global Header. The resulting content will still open up in the Right Sidebar as it does today.

Saved Messages Icon Button

Access to Saved Messages is moved out of the Channel Header and into the Global Header. The resulting content will still open up in the Right Sidebar as it does today.

Messaging Global Header In Context

Playbooks Global Header

In addition to the standard shared elements of the global header, the Playbooks Global Header will house the following elements. Search will be added at a later update.

1. Tasks

2. Activity

Other differences to note:

• The Navigator Icon Buttons are positioned differently

• The Help Icon Button is positioned differently

• The User Profile/Avatar Menu will not have any of the status options in its menu for Playbooks to start (To be confirmed)

Playbooks Global Header In Context

Focalboard Global Header

To start, the Focalboard Global Header will only house the standard shared elements in its global header. Search will be added at a later update.

Differences to note:

• The Navigator Icon Buttons are positioned differently

• The Help Icon Button is positioned differently

• The User Profile/Avatar Menu will not have any of the status options in its menu for Playbooks to start (To be confirmed)

Focalboard Global Header In Context

Mobile Webview

Messaging

For the first phase, Mobile webview for the Messaging app will remain largely the same with the addition of the Product Switcher (screenshots below).

Focalboard and Playbooks Mobile Webview

To be confirmed once the plan for a mobile responsive experience is nailed down for these products.