Skip to main content

App Bar

App Bar

App Bars appear at the top of apps. They include the title of the app or page, the main functions available from that location, and navigation options.

Using text in place of an icon in your App Bar should be avoided. Additionally, icons should always be on the right side of the App Bar.

The most common actions you'll find in an App Bar are search, an optional app-specific action, and the App Menu, in that order. The center is reserved for other custom functionality such as View Switchers or View Choosers, if the layout demands it.

  • If more actions are needed, place them here.
  • If there's more than one App Bar (in apps with Sidebars,)the other App Bars should use a Secondary Menu which uses the view-more-symbolic icon.
  • Add a scroller to your App Bar with the scroller property to enable compacting the App Bar to a single-line, darker background, on scroll.