Skip to content

Latest commit

 

History

History
72 lines (50 loc) · 2.72 KB

DockedFloatingToolbars.md

File metadata and controls

72 lines (50 loc) · 2.72 KB

Docked & floating toolbars

Docked & floating toolbars display frequently used actions relevant to the current page.

Docked & floating toolbars

  1. Docked toolbar: Spans the full width of the window. It’s best used for global actions that remain the same across multiple pages.
  2. Floating toolbar: Floats above the body content. It’s best used for contextual actions relevant to the body content or the specific page.

Note: Images use various dynamic color schemes.

Design & API documentation

Anatomy

Docked & floating toolbars anatomy diagram

  1. Container
  2. Elements

More details on anatomy items in the component guidelines.

M3 Expressive update

Before you can use Material3Expressive component styles, follow the Material3Expressive themes setup instructions.

The floating and docked toolbar

  1. Floating, vibrant color scheme and paired with FAB
  2. Docked with embedded primary action instead of FAB

The bottom app bar is being deprecated and should be replaced with the docked toolbar, which functions similarly, but is shorter and has more flexibility. The floating toolbar was created for more versatility, greater amounts of actions, and more variety in where it's placed. an inset icon. More on M3 Expressive

Types and naming

  • Added docked toolbar to replace bottom app bar

    • Size: Shorter height
    • Color: Standard or vibrant
    • Flexibility: More layout and element options

  • Added floating toolbar with the following attributes:

    • Layout: Horizontal or vertical
    • Color: Standard or vibrant
    • Flexibility: Can hold many elements and components. Can be paired with FAB.

  • Bottom app bar is still available, but not recommended