# Toolbar

Source: https://lumeo.nativ.sh/components/toolbar

# Toolbar

A horizontal container for toolbar items — buttons, separators, spacers, and groups — with full accessibility.

## When to Use

-   Group related actions (bold, italic, underline) in a text editor or data grid.
-   Provide contextual actions at the top of a panel or card.
-   Build app-level toolbars with spatially separated groups of controls.

Preview Code

Basic Toolbar

Copy Code

Preview Code

With Spacer and Groups

Copy Code

Preview Code

Overflow Menu

Copy Code

Preview Code

With Input

Export

Copy Code

## API Reference

### Toolbar

Property

Type

Default

Description

ChildContent

RenderFragment?

null

The toolbar items (buttons, separators, spacers, groups, inputs).

Overflow

bool

false

When true, enables overflow mode. Use VisibleCount to specify how many items stay inline.

VisibleCount

int

\-1

Number of leading items to show inline (Overflow=true). -1 shows all items.

OverflowLabel

string?

null

aria-label for the "⋯" overflow button. Defaults to "More".

Class

string?

null

Additional CSS classes appended to the toolbar container.

### ToolbarSeparator

Property

Type

Default

Description

Class

string?

null

A 1px vertical dividing rule between toolbar sections.

### ToolbarSpacer

A `flex-1` spacer that pushes subsequent toolbar items to the far right. No additional props.

### ToolbarGroup

Groups children with a tighter gap. Accepts `ChildContent` and `Class`. No additional props.

## Related Components

-   [AppBar](/components/app-bar) — Full-width top application bar with start/center/end zones.
-   [Button](/components/button) — The primary action component used within toolbars.
-   [ToggleGroup](/components/toggle-group) — Use when toolbar buttons represent exclusive choices (alignment, etc.).