Skip to main content

Toolbar

Overview

The toolbar spans 100% width, uses a border to separate the toolbar from the content area, and has slots for placing any content at the start, center, and end. It can be used below the app bar to display a page title and actions, within a nav drawer as a section, as a footer, or as header & footer in dialogs.

info

To see various common examples of the toolbar in action with code snippets, see the toolbar recipes page.


Components

The toolbar can be used as:

info

We've also built a responsive toolbar utility component that helps manage how a toolbar is rendered on large and small devices. For more information, check out the responsive toolbar component in the Forge Extended library.

Recipes

Patterns

Coming soon!