Components / Toolbar

Toolbar

A container for grouping a set of controls, such as buttons, toggle groups or links.

razor

<NaviusToolbar aria-label="Formatting options" class="flex items-center gap-1 ...">
    <NaviusToolbarToggleGroup Type="multiple" @bind-Value="_marks">
        <NaviusToolbarToggleItem Value="bold"
            class="... data-[pressed]:bg-accent">B</NaviusToolbarToggleItem>
        <NaviusToolbarToggleItem Value="italic"
            class="... data-[pressed]:bg-accent">I</NaviusToolbarToggleItem>
    </NaviusToolbarToggleGroup>

    <NaviusToolbarSeparator class="mx-1 h-5 w-px bg-border" />

    <NaviusToolbarToggleGroup Type="single" @bind-Value="_align">
        <NaviusToolbarToggleItem Value="left"
            class="... data-[pressed]:bg-accent">Left</NaviusToolbarToggleItem>
        <NaviusToolbarToggleItem Value="center"
            class="... data-[pressed]:bg-accent">Center</NaviusToolbarToggleItem>
    </NaviusToolbarToggleGroup>

    <NaviusToolbarSeparator class="mx-1 h-5 w-px bg-border" />

    <NaviusToolbarLink href="#" class="...">Share</NaviusToolbarLink>
</NaviusToolbar>

@code {
    private IReadOnlyList<string> _marks = new[] { "bold" };
    private IReadOnlyList<string> _align = new[] { "center" };
}

Features

Full keyboard navigation with a roving tabindex; the toolbar is a single Tab stop.
Composes buttons, links, separators and toggle groups in one accessible container.
Supports horizontal and vertical orientation.
Toggle groups can be controlled (@bind-Value) or uncontrolled (DefaultValue), in single or multiple mode.
Direction-aware: flips horizontal arrow keys in RTL.

Installation

Install the brain, or copy just this primitive in with the CLI.

Terminal bash

navius add toolbar

Anatomy

Import the parts and assemble them.

razor

@using Navius.Primitives.Components.Toolbar

<NaviusToolbar>
    <NaviusToolbarButton />
    <NaviusToolbarLink />

    <NaviusToolbarSeparator />

    <NaviusToolbarToggleGroup>
        <NaviusToolbarToggleItem />
    </NaviusToolbarToggleGroup>
</NaviusToolbar>

API Reference

Root

Contains all the parts of a toolbar. Renders a div with role="toolbar".

Prop	Type	Default
Orientation	string	"horizontal"
Loop	bool	true
Dir	string?	-
ChildContent	RenderFragment?	-

Data attributes

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"

Button

A focusable button control inside the toolbar. Renders a button.

Prop	Type	Default
Disabled	bool	false
ChildContent	RenderFragment?	-

Data attributes

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"
[data-disabled]	Present when disabled

Link

A focusable link control inside the toolbar. Renders an anchor. Provide href via attributes.

Prop	Type	Default
ChildContent	RenderFragment?	-

Data attributes

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"

Separator

A non-focusable visual divider between groups of items. Renders a div with role="separator".

Prop	Type	Default

Data attributes

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical" (perpendicular to the toolbar)

ToggleGroup

A set of toggle buttons inside the toolbar. Renders a div with role="group".

Prop	Type	Default
Type	string	"single"
Value	IReadOnlyList<string>?	-
ValueChanged	EventCallback<IReadOnlyList<string>>	-
DefaultValue	IReadOnlyList<string>?	-
Disabled	bool	false
ChildContent	RenderFragment?	-

Data attributes

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"
[data-disabled]	Present when the group is disabled

ToggleItem

A single toggle button inside a ToggleGroup. Renders a button with aria-pressed.

Prop	Type	Default
Value	string	""
Disabled	bool	false
ChildContent	RenderFragment?	-

Data attributes

Data attribute	Values
[data-pressed]	Present when the item is pressed (on)
[data-orientation]	"horizontal" \| "vertical"
[data-disabled]	Present when disabled

Accessibility

Adheres to the toolbar WAI-ARIA design pattern. Supply an aria-label on the root so assistive technology can announce the toolbar.

Keyboard interactions

Key	Description
`Tab`	Moves focus into the toolbar, landing on the first enabled item. From inside, moves focus out of the toolbar.
`ArrowRight`	In horizontal orientation, moves focus to the next item.
`ArrowLeft`	In horizontal orientation, moves focus to the previous item.
`ArrowDown`	In vertical orientation, moves focus to the next item.
`ArrowUp`	In vertical orientation, moves focus to the previous item.
`Home`	Moves focus to the first item.
`End`	Moves focus to the last item.
`Enter`	Activates the focused item (toggles a `ToggleItem`, follows a `Link`).
`Space`	Activates the focused item (toggles a `ToggleItem`).