Toolbar

  • Article

As defined by the W3C:

A toolbar is a container for grouping a set of controls, such as buttons, menu buttons, 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.

fluent-toolbar

Setup

import {
    provideFluentDesignSystem,
    fluentToolbar
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentToolbar()
    );

Create your own design

import {
    Toolbar,
    toolbarTemplate as template,
} from "@fluentui/fast-foundation";
import { toolbarStyles as styles } from "./my-toolbar.styles";

export const myToolbar = Toolbar.compose({
    baseName: "toolbar",
    template,
    styles,
    shadowOptions: {
        delegatesFocus: true,
    },
});

Example

FluentToolbar

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

Usage

@using Microsoft.Fast.Components.FluentUI
<FluentToolbar>
    <span slot="label">Span Label</span>
    <FluentButton>One</FluentButton>
    <FluentButton>Two</FluentButton>
    <FluentButton>Three</FluentButton>
</FluentToolbar>

Example

See the component in action with implementation examples at the Blazor demo site.

Additional Resources

Code in GitHub W3C Component Aria Practices