Toolbar

shadow

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 various actions in the form of buttons into a single unit.

Basic usage

The sample represents a basic toolbar with a default composition of content and controls.

Dynamic breadcrumbs

The sample consists of a toolbar from a dynamically generated breadcrumb trail, which is useful for context-dependent navigation.

Dynamic action

The sample switches breadcrumbs and actions according to the available width. wje-breadcrumbs can collapse the middle of the trail below a breakpoint, and wje-toolbar-action moves buttons into an overflow menu.

Outer Spacing

Toolbar has dedicated CSS variables for outer spacing: --wje-toolbar-margin-inline and --wje-toolbar-margin-block. Use them when you need to adjust the area around the toolbar without changing its internal padding or action layout.

wje-toolbar.compact {
  --wje-toolbar-margin-block: 0 0.5rem;
  --wje-toolbar-margin-inline: 0;
}

Slot alignment

The start and end slots are flex rows. Content in start can grow and shrink and uses min-width: 0 so breadcrumbs or long text can truncate correctly. Content in end stays aligned to the right and keeps a stable width for actions.

When to use

Use wje-toolbar to compose a stable page layout with a clear content hierarchy.

When not to use

Do not use it to solve business logic or for stateful orchestration of components.

Accessibility

Preserve the semantics of the document (header, main, aside, footer) and the logical order of focusable elements.

Recommended practices

• Define desktop/mobile breakpoints first and then fine-tune the details.
• Prefer consistent spacing tokens over ad-hoc margin/padding values.
• For layouts with overflow, always test keyboard navigation and readers.

Attributes and properties

Pre tento komponent nie sú dostupné žiadne vlastnosti.

Events

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods

scheduleResponsiveLayout

Popis	Schedules responsive layout recalculation.
Signatúra	() => void

updateResponsiveLayout

Popis	Aktualizuje responsive layout podľa najnovších údajov komponentu.
Signatúra	() => Promise<void>

measureBreadcrumbs

Popis	Spustí metódu measureBreadcrumbs na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(breadcrumbs: HTMLElement) => Promise<{count: number, fullWidth: number, compactWidth: number}>

ensureBreadcrumbState

Popis	Spustí metódu ensureBreadcrumbState na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(breadcrumbs: HTMLElement, count: number) => {compactMaxItems: number}

setBreadcrumbCompactState

Popis	Nastaví breadcrumb compact state a aplikuje súvisiace zmeny stavu.
Signatúra	(breadcrumbs: HTMLElement｜null, compact: boolean) => void

setBreadcrumbMaxItems

Popis	Nastaví breadcrumb max položky a aplikuje súvisiace zmeny stavu.
Signatúra	(breadcrumbs: HTMLElement, value: number) => void

getVisibleActionsForWidth

Popis	Vráti visible actions for width z aktuálneho stavu komponentu.
Signatúra	(actionMetrics: object, width: number) => number

setVisibleActions

Popis	Applies visible action count.
Signatúra	(action: HTMLElement｜null, count: number) => void

clearVisibleActions

Popis	Vyčistí visible actions a obnoví súvisiace hodnoty.
Signatúra	(action: HTMLElement｜null) => void

getToolbarAction

Popis	Vráti toolbar action z aktuálneho stavu komponentu.
Signatúra	() => HTMLElement｜null

getBreadcrumbs

Popis	Vráti breadcrumbs z aktuálneho stavu komponentu.
Signatúra	() => HTMLElement｜null

isSelfManagedAction

Popis	Overí, či je self managed action aktuálne pravda.
Signatúra	(action: HTMLElement｜null) => boolean

isSelfManagedBreadcrumbs

Popis	Overí, či je self managed breadcrumbs aktuálne pravda.
Signatúra	(breadcrumbs: HTMLElement｜null, action: any) => boolean

nextFrame

Popis	Spustí metódu nextFrame na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => Promise<void>

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS custom variables

Názov	Popis
--wje-toolbar-background	Vlastná CSS premenná na štýlovanie komponentu (background).
--wje-toolbar-height	Vlastná CSS premenná, ktorá riadi height.
--wje-toolbar-min-height	Vlastná CSS premenná, ktorá riadi min height.
--wje-toolbar-padding-top	Vlastná CSS premenná, ktorá riadi padding top.
--wje-toolbar-padding-bottom	Vlastná CSS premenná, ktorá riadi padding bottom.
--wje-toolbar-padding-inline	Vlastná CSS premenná, ktorá riadi padding inline.
--wje-toolbar-margin-block	Vlastná CSS premenná, ktorá riadi margin block.
--wje-toolbar-margin-inline	Vlastná CSS premenná, ktorá riadi margin inline.
--wje-toolbar-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-toolbar-top	Vlastná CSS premenná na štýlovanie komponentu (top).

Slots

Názov	Popis
start	Slot pre obsah zobrazený pred hlavným obsahom.
end	Slot pre obsah zobrazený za hlavným obsahom.