Responsive Toolbar
The responsive toolbar switches between two sets of end actions, such as inline buttons and an overflow menu, depending on whether its title leaves enough room.
Overview
The responsive toolbar is a toolbar that adapts its actions to the space available. When there is room, it shows the full set of actions; when the title would collide with them, it swaps to a compact version. It’s typically used at the top of a card, panel, or page section whose width changes, such as a resizable panel or a narrow viewport.
Usage
forge-responsive-toolbar extends the toolbar with two end slots. Put the full set of actions, like a row of buttons, in end-large, and a compact alternative, like an icon button that opens a menu, in end-small. The toolbar shows end-large while the title doesn’t overlap the actions and end-small once it does. The before-start, start, and after-end slots map to the toolbar’s slots of the same names, and the no-border and inverted properties control the divider. Listen for forge-responsive-toolbar-update to react to the change, and use resize-delay to tune how often resizes are checked. Use it when the toolbar’s width changes; for a fixed-width toolbar, use a plain toolbar.
Rules
end-large and end-small so nothing becomes unavailable at small sizes.end-small.white-space: nowrap through a utility class so overlap is measured against a single line.aria-label.Basic usage
A card toolbar with a back button, title, and actions that collapse into an overflow menu when space runs out.
A responsive toolbar with a back button and title that swaps inline buttons for an overflow menu as its container shrinks.
A toolbar that switches between two end-slot layouts based on whether its title is overlapping its actions.
import "@tylertech/forge/responsive-toolbar";| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
noBorder | — | boolean | false | Hides the toolbar divider. |
inverted | — | boolean | false | Controls whether a bottom divider (default) or top divider (true) is used. |
resizeDelay | — | number | 100 | Controls the delay in milliseconds to throttle resize events. |
| Name | Type | Description |
|---|---|---|
forge-responsive-toolbar-update | CustomEvent<ResponsiveToolbarUpdateEventData> | Dispatched when the overflow state changes. |
| Name | Description |
|---|---|
before-start | Maps to the toolbar before-start slot |
start | Maps to the toolbar start slot |
end-large | The content you want to render at larger sizes in the toolbar end slot |
end-small | The content you want to render at smaller sizes in the toolbar end slot |
after-end | Maps to the toolbar after-end slot |
Equivalent actions
Only one of end-large and end-small is visible at a time, and the other is hidden. Make both slots expose the same actions so keyboard and screen reader users can reach everything at any size.
Labeling
Give every icon button in the toolbar an aria-label, such as “Back” or “More actions”, since it has no visible text. If you use a menu in end-small, label its trigger button as well.
Keyboard interaction
The responsive toolbar is a layout container with no keyboard behavior of its own. Slotted controls follow the natural tab order: before-start, start, the visible end slot, then after-end. See menu for the keys supported by an overflow menu.