Copy linkLink copied

Copy linkLink copied

Usage

Copy linkLink copied

Use a toolbar to provide actions related to the current page. 

Toolbars can contain many actions and can scale to show more actions in larger windows.

Copy linkLink copied

There are two variants of toolbars:

• Docked toolbar

  Spans the full width of the window. It’s best used for global actions that remain the same across multiple pages.

• Floating toolbar

  Floats above the body content. It’s best used for contextual actions relevant to the body content or the specific page.

The baseline bottom app bar is no longer recommended, but is still supported.

Copy linkLink copied

Copy linkLink copied

When actions don’t fit in a toolbar, add a menu Menus display a list of choices on a temporary surface. More on menus .

Copy linkLink copied

There are two color configurations:

• Standard

  A low-emphasis color scheme best used for focusing attention on the body content.
  

• Vibrant

  A high-emphasis color scheme that draws attention to the controls. It can also indicate a temporary change in the page behavior, such as entering edit mode.

Consider using alternative color roles to create greater or lesser emphasis depending on the needs of the app. Experiment with different color roles to achieve different effects. 

Copy linkLink copied

Copy linkLink copied

Toolbars & navigation bars

Copy linkLink copied

The toolbar and navigation bar Navigation bars let people switch between UI views on smaller devices. More on navigation bars are both placed at the bottom of the window, so should not be shown at the same time. Show the navigation bar on primary pages, and toolbars on subsequent pages with actions.

Copy linkLink copied

Copy linkLink copied

Floating toolbars can be used as tabs between related subsequent pages in the product hierarchy. 

This helps group similar pages together, and shows that the selection affects the body content underneath.

Copy linkLink copied

Consider the existing app hierarchy when using a toolbar for local navigation. 

Avoid redundant or confusing navigation combinations in the same view.

Copy linkLink copied

Anatomy

Copy linkLink copied

Copy linkLink copied

Container

The docked toolbar’s container spans the full width of the window. 

Avoid applying rounded corners to the container. This can imply the container expands or changes upon interaction.

Copy linkLink copied

As long as there's a minimum of 16dp padding on the leading and trailing edge, arrange controls inside however you see fit. The 32dp padding between items is just the default. 

All elements need a minimum 48x48dp target area to be accessible.

Be cautious of including too many controls as it can be overwhelming.

Copy linkLink copied

The floating toolbar’s container should be fully visible on screen. If more actions are needed, use an overflow menu.

Copy linkLink copied

Copy linkLink copied

Elevation

Copy linkLink copied

Flexibility & slots

Copy linkLink copied

Visually emphasizing a single action more than others is an effective way to create hierarchy and guide people to controls they use most often. Avoid emphasizing more than one action at a time.

Some common ways to add emphasis to toolbar actions include:

• Use different icon button Icon buttons help people take minor actions with one tap. More on icon buttons color styles, such as filled, tonal, and standard
• Customize the color roles Color roles are assigned to UI elements based on emphasis, container type, and relationship with other elements. This ensures proper contrast and usage in any color scheme. More on color roles of a single action, such as a primary or secondary palette
• Use wide and narrow icon buttons 
  
• Pair the toolbar with a FAB Floating action buttons (FABs) help people take primary actions. More on FABs

Copy linkLink copied

Copy linkLink copied

Avoid using square icon buttons in floating toolbars. Their square shape conflicts with the fully-rounded shape of the floating toolbar container.

Square buttons can be used in the docked toolbar.

Copy linkLink copied

Floating toolbar with FAB

A FAB Floating action buttons (FABs) help people take primary actions. More on FABs can be placed next to a floating toolbar to present one high-priority action alongside a unified set of toolbar actions.

Use a FAB for the highest-priority action in the view, or to complement the controls.

Copy linkLink copied

Position & orientation

Copy linkLink copied

Only place docked toolbars at the bottom of the window. 

If using other bottom-aligned elements, such as a navigation bar, don't use a docked toolbar.

Copy linkLink copied

Floating toolbars can be horizontal or vertical. 

Horizontal toolbars should have a minimum 16dp margin from the edge of the window.

Copy linkLink copied

In larger window sizes, floating toolbars can be vertical and placed on either side of the screen.

Vertical toolbars should have a minimum 24dp margin.

Copy linkLink copied

To keep vertical toolbars compact, don’t use wide icon buttons. 

Use narrow or default icon buttons instead.

Copy linkLink copied

Vertical toolbars should be positioned opposite the navigation rail Navigation rails let people switch between UI views on mid-sized devices. More on navigation rails to balance out the screen and keep actions easy to access.

When showing a navigation rail and vertical floating toolbar at once, use the centered configuration of the navigation rail.

Copy linkLink copied

Adaptive design

Copy linkLink copied

Adaptive design allows an interface to respond or change based on context, such as the user, device, and usage. More on adaptive design

Copy linkLink copied

Resizing

Copy linkLink copied

Docked

The docked toolbar should always span 100% of the screen width.

In compact window sizes Window widths smaller than 600dp, such as a phone in portrait orientation. More on compact window size class , elements in the toolbar should be evenly spaced.

In medium window sizes Window widths from 600dp to 839dp, such as a tablet or foldable in portrait orientation. More on medium window size class and larger, adjust the padding between controls to create a comfortable layout. This can be achieved by: 

• Centering all elements
  
• Customizing to center a key action, and aligning other elements to the edges

Copy linkLink copied

Copy linkLink copied

Copy linkLink copied

On web and large screens, the docked toolbar can be rounded. Dividers can be used to organize large amounts of items. Only shrink the height and use extra small buttons if vertical space is limited.

Copy linkLink copied

Copy linkLink copied

Floating

The container should only be as big as needed to hold the items inside before reaching the 16dp margin.

If there’s not enough space for all items, put them in an overflow menu in the trailing slot. As the window size expands, more actions can be revealed.

The floating toolbar width can also be capped to keep it smaller and hide more elements.

Copy linkLink copied

Copy linkLink copied

Only use them when the screen is simple or when the toolbar has a few controls.

Copy linkLink copied

Presentation

Copy linkLink copied

In larger window sizes, floating toolbars can be aligned to opposite edges of the screen so they're easy to reach and group similar actions. For example, consider placing the undo and redo actions in one toolbar, and editing controls like highlight, erase, and select in another. Stylistic differences can help emphasize each toolbar’s purpose and clarify hierarchy.

Copy linkLink copied

Copy linkLink copied

Don’t use multiple toolbars in compact windows. There typically isn’t enough room on screen. 

Instead, use one toolbar for all actions.

Copy linkLink copied

Actions at the trailing edge of the toolbar can collapse into an overflow menu at smaller window sizes, and become visible again at larger sizes. 

Copy linkLink copied

Right-to-left languages

In right-to-left (RTL) languages, mirror individual items that need it, like icons and text direction. If the order of actions is important, flip the order of the actions as well.

Copy linkLink copied

Copy linkLink copied

Behavior

Copy linkLink copied

Scrolling

Docked toolbars can either remain on the screen during scroll, or animate offscreen.

Copy linkLink copied

Floating toolbars can remain on the screen, animate offscreen, or collapse into a single, high-emphasis action on scroll.

Copy linkLink copied

On Jetpack Compose, the floating toolbar can collapse to a FAB or key action on scroll. 

Copy linkLink copied

Don't collapse actions and scroll at the same time.