Toolbar

As defined by the W3C:

A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.

When a set of controls is visually presented as a group, the toolbar role can be used to communicate the presence and purpose of the grouping to screen reader users. Grouping controls into toolbars can also be an effective way of reducing the number of tab stops in the keyboard interface.

<FluentToolbar> wraps the <fluent-toolbar> element, a web component implementation of a toolbar leveraging the Fluent UI design system.

Examples

Light and dark mode

Example
Accent Button Stealth Button One Two Three
Select brand color
Button Option 1 Second option Option 3 Checkbox
Add Open Copy Export Automate Stealth Refresh 21 items
Select brand color
Filter
Download: 

Slotted end items with minimal width

Example
Add Open Copy Refresh 21 items Filter
Download: 

Different kinds of labels

Example

Slotted (span) label

Span Label One Two Three

External label

One Two Three

Invisible label

One Two Three
Download: 

Vertical orientation

Example
Span Label One Two Three
Download: 

Disabled elements

Example
One Two Three One Two Three One Two Three One Two Three One Two Three One Two Three One Two Three
Download: 

RTL mode

Example
One Two Three One Two Three
Download: 

Start and End slots

Example
Download: 

Documentation

FluentToolbar Class

Parameters

Name
Type
Default
Description
ChildContentRenderFragment?
Gets or sets the content to be rendered inside the component.
EnableArrowKeyTextNavigationbool?
False
Gets or sets a value indicating whether arrow key navigation within text input fields is enabled. Default is false.
OrientationOrientation?
Horizontal
Gets or sets the toolbar's orentation. See FluentToolbar.Orientation

Methods

Name
Parameters
Type
Description
DisposeAsyncValueTask
Horizontal
Vertical
An error has occurred. This application may no longer respond until reloaded. Reload 🗙