Toolbar
The Element Toolbar is a flexible container designed to display a variety of content in an organized manner, typically used at the top of web applications or pages. It may contain buttons, navigation, search box, and more. It supports content alignment and can also be glued to the top of the screen.
Part of the Toolbar is the ToolbarActions element, which groups different actions in the form of buttons into a single unit.
Basic usage
Dynamic breadcrumbs
Dynamic action
When to use
Use wje-toolbar to compose stable page structure with clear visual and semantic hierarchy.
When not to use
Do not use layout components to handle business logic or application orchestration.
Accessibility
Preserve document semantics (header, main, aside, footer) and logical tab/focus order.
Best Practices
- Define mobile/desktop breakpoints first, then refine visual details.
- Prefer spacing tokens over ad-hoc margin/padding overrides.
- Test keyboard and screen reader behavior for overflow scenarios.
Attributes and Properties
No properties available for this component.
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | The native toolbar wrapper. |
CSS Custom Properties
| Name | Description |
|---|---|
--wje-toolbar-background | Specifies the background color of the toolbar. Accepts any valid CSS color value, such as hex, rgb, or CSS variable. |
--wje-toolbar-height | Defines the height of the toolbar. If set to auto, the height adjusts based on the content. |
--wje-toolbar-min-height | Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size. |
--wje-toolbar-padding-top | Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit. |
--wje-toolbar-padding-bottom | Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge. |
--wje-toolbar-padding-inline | Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides. |
--wje-toolbar-border-color | Sets the color of the toolbar's border. Accepts any valid CSS color value. |
--wje-toolbar-top | Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars. |
Slots
| Name | Description |
|---|---|
start | The start slot for the toolbar. |
end | The end slot for the toolbar. |