The m3e-toolbar component presents contextual actions, navigation, and controls.

npm i @m3e/toolbar

This section outlines usage examples and configuration guidance for the components in this package.

There are two toolbar appearance variants: standard (default) and vibrant. Use the variant attribute to change the appearance.

<m3e-toolbar variant="standard">
  <m3e-icon-button>
    <m3e-icon name="arrow_back"></m3e-icon>
  </m3e-icon-button>
  <m3e-icon-button>
    <m3e-icon name="arrow_forward"></m3e-icon>
  </m3e-icon-button>
  <m3e-icon-button width="wide" variant="filled">
    <m3e-icon name="add"></m3e-icon>
  </m3e-icon-button>
  <m3e-icon-button>
    <m3e-icon name="picture_in_picture"></m3e-icon>
  </m3e-icon-button>
  <m3e-icon-button>
    <m3e-icon name="more_vert"></m3e-icon>
  </m3e-icon-button>
</m3e-toolbar>
<m3e-toolbar variant="vibrant">
  <!-- Content omitted for brevity -->
</m3e-toolbar>

There are two shape variants: square (default) and rounded. Use the shape attribute to change the appearance.

<m3e-toolbar variant="vibrant" shape="rounded">
  <!-- Content omitted for brevity -->
</m3e-toolbar>

Use the elevated attribute to elevate a toolbar to a visually prominent surface, distinguishing it from the surrounding layout and signaling its importance or active context.

<m3e-toolbar variant="vibrant" shape="rounded" elevated>
  <!-- Content omitted for brevity -->
</m3e-toolbar>

By default, toolbar are oriented horizontally. Use the vertical attribute to orient the toolbar vertically, stacking its interactive elements from top to bottom rather than left to right. This is useful for side panels, compact layouts, or contexts where vertical alignment enhances clarity or accessibility.

<m3e-toolbar variant="vibrant" shape="rounded" vertical>
  <!-- Content omitted for brevity -->
</m3e-toolbar>

Toolbars are given ARIA role="toolbar" indicating that the element serves as a container for a group of interactive controls, typically buttons, that perform actions related to a common context. This role helps assistive technologies understand the grouping and purpose of the controls within, enhancing navigation and discoverability.

Vertically oriented toolbars are given aria-orientation="vertical" to explicitly communicate their layout direction to assistive technologies, enhancing navigation and spatial understanding for users relying on screen readers or keyboard interaction.

This package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following.

<script type="module" src="/node_modules/@m3e/toolbar/dist/index.js"></script>

In addition, you must use an import map to include dependencies.

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js",
      "@m3e/core/a11y": "/node_modules/@m3e/core/dist/a11y.js"
    }
  }
</script>

For production, use index.min.js and a11y.min.js for faster load times.

This package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.