top bar

The top bar runs across the top of every screen: on the portal's home page, in every app inside it, and in every product opened from it. It always answers the same four questions: where am I, where do I find something, is there anything new for me, and where is my account?

Because it looks and works the same everywhere, people learn it once, and always know where to look.

The top bar with an app open: the product's name and the app's name on the left; the search, notifications and the user menu on the right.

The top bar, its search, its user menu and the avatar are planned components; the drawings on this page show the idea.

what it holds

The top bar, close up, from left to right.

The product's name, led by the blue chevron. It takes people home: to the portal's home page, or to the product's own start page.
The app's name, next to it, when an app is open: “/ downloads”. People always know where they are.
Search: one field for the whole platform, which finds apps, and the things inside them that the apps offer to search. It is planned; search below describes how it works.
Notifications: a bell with the number of unread notices. It opens one panel with the notices of every app.
The user menu, behind a small square with the person's picture or initials, their avatar. It opens one menu for everything about the person.

The user menu: who is signed in, then account, settings and help, and sign out last.

The menu starts with the person's name and email address, so they can see who is signed in. Then come account, settings (only for people who may change them), and help. Sign out comes last, set apart, so nobody presses it by accident.

search

There is one search, and it is always in the same place: in the top bar, just before the notifications. It finds apps, and the things inside them that the apps offer to search. Because it never moves, people learn it once and find it on every screen. The search is planned, like the rest of the bar.

On a wide screen, the search is a field in the bar. On a phone, it is an icon that opens a field across the whole width.

On the home page, it narrows the tiles as people type, so the search is also the tile finder. The home page has no search box of its own, so there is never a second one to choose from; see home & tiles.
Anywhere else, it shows a short list of results under the field, with the apps first, so people can open another app from wherever they are.
The / key jumps to it from anywhere on the screen, except while people are typing in a text field.
On a phone, it is an icon in the bar. Pressing it opens a field across the whole width.

The same search, in the same place. On the home page, typing “down” narrows the tiles to the one that matches. In an app, the same word opens a short list under the field, with the apps first and the things inside them after.

the same everywhere

One user menu, in every product. No email address shown in the bar, and no sign-out button of its own.
The avatar is square, like every frame in the system. A photo is cropped to a square.
A product for consumers can keep its own main navigation in the bar, such as home, films and series. The product's name, the notifications and the user menu stay where the shell puts them, and look the way the shell draws them.
The product's name holds still. The bar is always in view, so its chevron doesn't blink; see brand.

A product for consumers keeps its own navigation in the middle; the name, the bell and the user menu stay as the shell has them.

The product's and the app's names, the bell with its count, and one square avatar that opens the one menu.

don't

An email address as a badge, a sign-out button of its own, and a round avatar that looks different from everything else.

what doesn't go in it

The bar belongs to the shell, so it only holds what every screen shares.

An app's own actions belong in the app's header or its toolbar.
Moving between an app's views is the app's own navigation.
An app's settings are reached through the user menu: its settings list each app's setup and link straight to it. See settings and setup.

accessibility

Planned, together with the components:

The bar is the page's header landmark, which screen reader users can jump to. The product's name is a link named after where it goes, such as the product's name and “home”.
The search is a region of its own that people can jump to as well, and its field is named after what it finds, such as “search apps”. On a phone, the icon is a button named “search”, and pressing it puts the focus in the field it opens.
While people type, a screen reader says how many apps match on the home page, and how many results the list holds anywhere else.
The bell is a button whose name includes the count: “notifications, 2 unread”.
The avatar is a button whose name says what it shows and what it opens: “au, user menu”. Inside the menu, the arrow keys move between the items, and Esc closes it and puts the focus back on the avatar, as in the action menu.

the words

The product's name. The product's own name, lowercase, as on its tile.
The app's name. The same word as the app's tile on the home page.
The search. Its placeholder says what it finds, in the same words as its name: “search apps…”.
The menu's header. The person's name, then their email address, quieter.
The menu's items. Account, settings, help and sign out, in that order.

App navigation: the app's own views, under the bar.
Home & tiles: where the product's name leads back to, and the tiles the search narrows there.
Settings and setup: what the user menu's settings hold.
Brand: the chevron and the product's name.
Principles: 4, one platform, many apps.