Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Topbar

Version 1.2.1GithubStorybook

Topbar contains application-wide controls that rest at the top of the screen.

Guidelines

Guidelines page anchor

Accessibility

Accessibility page anchor
  • Set a value for id to be used with Sidebar skip link functionality. The ID must be a unique string not used elsewhere in the application.

A Topbar is sticky to the top of the screen and consists of application-wide controls including:

Account-specific controls (aligned to the left) such as:

User-specific controls (aligned to the right) such as:

Each set of controls should be contained within a TopbarActions component, which comes with a justify property. You can justify these controls to either the start or the end of the Topbar.

Topbar for Twilio Console

Topbar for Twilio Console page anchor

Topbar for Twilio Segment

Topbar for Twilio Segment page anchor