As the name implies, this component is fixed to the top of the page (i.e. does not scroll with the content), scaling in width to the size of the window. Except for banner notifications shown at platform-level, there should be no other content show above a topbar.

Primarily used to show users where they are within our platform, topbars also provide additional actions and navigation support, depending on device type.

More information is available on the navigation patterns page.

Variations

Differences between desktop and mobile in terms of usage patterns, screen space and interface conventions qualify the topbar to be implemented as two separate components, each specific to a device type. For the sake of documentation, we have grouped both of them under this page.

Device