On this page
Overview
Show code, AppTopBar.tsx
Variants
Its background
The bar is a plain rectangle in the navigation's background, with no line below. On the page's background instead: see Scaffold.
Title bar
The bar can be the window's own title bar in an installed web app: empty space drags the window, the title is centred and the controls are small.
- It then spans the whole Scaffold.
Show code, TitleBar.tsx
Anatomy
Bar
Start
Title
Actions
Show code, TopBarAnatomy.tsx
Behaviour
Adapting to width
The bar never wraps: the title is cut short first, and the start content and actions keep their size.
Show code, TitleFirstToGo.tsx
Rules
The bar goes in a Scaffold's top bar region, the screen's banner, and keeps room for its title.
Use it when
- The top of an application's screen, with its name, search and the account menu
- The bar inside a window frame, as the window's own title bar
Show code, FewActions.tsx
Show code, ManyActions.tsx
Layout
The title names the application or the section.
- The navigation goes in the Scaffold's navigation region, not in the top bar.