Skip to main content

Toolbar

Shadow dwc-toolbar
Java API

Toolbars offer users quick access to core actions and navigation elements. The webforJ Toolbar component is a horizontal container that can hold a set of action buttons, icons, or other components. It's well-suited for managing page controls and housing key functions like a search bar or a notification button.

Organizing toolbar content​

The Toolbar organizes essential components in an easily accessible and consistent layout. By default, it takes the full width of its parent element and provides four placement areas, or slots, for organizing components:

  • Start: Usually contains an AppDrawerToggle or a home button.
  • Title: Used for app names or logos.
  • Content: For high-attention actions like search or navigation.
  • End: Less frequent actions, such as user profile or help.

Each slot has a method for adding components: addToStart(), addToTitle(), addToContent(), and addToEnd().

The following demo shows how to add a Toolbar to an AppLayout and utilize all supported slots effectively. To read more about implementing toolbars within an AppLayout, see Sticky toolbars and Mobile navigation layout.


Show Code

Compact mode​

Use setCompact(true) to reduce the padding around a Toolbar. This is helpful when you need to fit more content on screen, especially in apps with stacked toolbars or limited space. The toolbar still behaves the same—only the height is reduced. This mode is commonly used in headers, sidebars, or layouts where space is tight.

Toolbar toolbar = new Toolbar();
toolbar.setCompact(true);

Show Code

ProgressBar in toolbars​

A ProgressBar serves as a visual indicator for ongoing processes, such as loading data, uploading files, or completing steps in a flow. When placed inside a Toolbar, the ProgressBar aligns neatly along the bottom edge, making it unobtrusive while still clearly communicating progress to users.

You can combine it with other components in the toolbar like buttons or labels without disrupting the layout.


Show Code

Styling​

Themes​

Toolbar components include seven built-in themes for quick visual customization:

Show Code

Shadow parts​

These are the parts of the shadow DOM that can be targeted via CSS:

Loading...

Slots​

Available slots within the Toolbar component:

Loading...

Reflected attributes​

These are attributes visible in the DOM, allowing styling via attribute selectors:

Loading...