Edit

Title bar

  • Article

The title bar sits at the top of an app on the base layer. Its main purpose is to allow users to be able to identify the app via its title, move the app window, and minimize, maximize, or close the app.

An example of a title bar

Standard design

Design features of a standard title bar:

  • 32px height
  • 16px app icon
  • Caption style text (see XAML type ramp)
  • Caption controls (minimize, maximize, close)

Additional design patterns

Back button

If a backstack is present, the back button should be placed to the left of the app title or image/title combination.

An example of a back button in the title bar

If global search functionality is present, a searchbox should be added to the titlebar, centered to the window. Increase the size of the title bar to 48px when including a searchbox.

An example of a search box centered in the title bar

Searchbox in this area will need to be designed to be responsive to react to window size changes.

People

If account representation is present, the person-picture control should be placed to the left of the caption controls. Increase the size of the title bar to 48px when including a person-picture.

An example of a person picture control in the title bar

Tabs

If using tabs as the main element of an app, use the titlebar space and keep caption controls anchored to the right.

An example of a tab view with tabs in the titlebar area

Next steps

See the developer guidance for title bar