`<dj-toolbar>`

A horizontal action bar with role="toolbar".

npm install @dojo-ng/toolbar

import "@dojo-ng/toolbar";

Layout

Set the overflow property to a list of options to put secondary actions in a menu. A ⋮ button opens them in a popup <dj-list>.
Choosing one emits dj-action with its value.
The menu closes when an item is chosen, on Escape, on a click outside, and when focus leaves it.

Moving slotted actions into the menu automatically when space runs out. For now your app decides which actions are primary and which go in overflow.

Need one of these? Make a request on Discord or add an issue (work item) on Heptapod.

Property	Attribute	Type	Default
`label`Accessible name for the toolbar (sets `aria-label` on the bar).	`label`	`string`	None
`sticky`	`sticky` reflected	`boolean`	`false`
`overflow`Secondary actions rendered behind the overflow (`⋮`) button.	Property only	`ListOption[]`	`[]`
`overflowPosition`	`overflow-position` reflected	`"above""below""left""right"`	`"below"`

Event	Description
`dj-action`	detail: `{ value }`

Slot	Description
`leading`	a logo, or a menu or back button.
Default slot	the title or other content.
`actions`	the primary action buttons, aligned to the end.

Style these with dj-toolbar::part(name).

barleadingtitleactionsoverflow

The types that the properties above use, as they are declared in the source.

export interface ListOption { value: string; label: string; disabled?: boolean; divider?: boolean; }