<le-toolbar>

A horizontal container for buttons and button groups that automatically collapses overflowing items into a dropdown menu. The toolbar uses a priority system to determine which items to collapse first, allowing important actions to remain visible as long as possible.

<le-toolbar>
  <le-button priority="3" collapsible icon-start="file::add-badge">New</le-button>
  <le-button priority="3" collapsible icon-start="folder-open">Open</le-button>

  <le-toolbar-spacer width="var(--le-space-md)"></le-toolbar-spacer>

  <le-button-group overflow-icons label="History" collapse="2">
    <le-button label="Undo" icon-only="undo"></le-button>
    <le-button label="Redo" icon-only="redo"></le-button>
  </le-button-group>

  <le-toolbar-spacer width="var(--le-space-md)"></le-toolbar-spacer>

  <le-button-group overflow-icons priority="2" label="Text Align">
    <le-button label="Align Left" icon-only="align-left"></le-button>
    <le-button label="Align Center" icon-only="align-center"></le-button>
    <le-button label="Align Right" icon-only="align-right"></le-button>
    <le-button label="Justify" icon-only="align-justify"></le-button>
    <le-button label="Line Spacing" icon-only="line-spacing"></le-button>
  </le-button-group>

  <le-toolbar-spacer width="var(--le-space-md)"></le-toolbar-spacer>

  <le-button-group overflow-icons label="Lists">
    <le-button label="Bullet List" icon-only="bullet-list"></le-button>
    <le-button label="Numbered List" icon-only="numbered-list"></le-button>
    <le-button label="Checklist" icon-only="check-list"></le-button>
    <le-button label="Increase Indent" icon-only="increase-indent"></le-button>
    <le-button label="Decrease Indent" icon-only="decrease-indent"></le-button>
  </le-button-group>

  <le-toolbar-spacer width="var(--le-space-md)"></le-toolbar-spacer>

  <le-button-group overflow-icons label="Borders" collapse="1">
    <le-button label="Outside Borders" icon-only="outside-borders"></le-button>
    <le-button label="Clear Borders" icon-only="no-borders"></le-button>
    <le-button label="Top Border" icon-only="top-border"></le-button>
    <le-button label="Left Border" icon-only="left-border"></le-button>
    <le-button label="Right Border" icon-only="right-border"></le-button>
    <le-button label="Bottom Border" icon-only="bottom-border"></le-button>
  </le-button-group>

  <le-toolbar-spacer></le-toolbar-spacer>

  <le-button color="danger" collapsible icon-start="delete">Delete</le-button>
  <le-button collapsible icon-start="tune">Settings</le-button>
</le-toolbar>

Children

As you can see, <le-toolbar> is not working alone. The toolbar requires <le-button> or <le-button-group> components to function properly.

At the moment, there are three components that can be used within a toolbar:

<le-button>

The buttons should collapse with an animation when the toolbar overflows, and then they will appear in the overflow menu. To appear correctly in the overflow menu, buttons that are icon-only should have a label attribute, to be shown correctly in the overflow menu.

<le-button-group>

Button groups will try to shrink first, using it's collapse attrbiute. And will appear in the toolbar's overflow menu only after it fully collapses. It will appear in the overflow menu as a expandable section, and it also need a label attribute, to be used as a group title in the overflow menu.

<le-toolbar-spacer>

The Toolbar Spacer is a special component that will take up all available space in the toolbar, pushing other items to the sides. It can be used to create space between groups of buttons, or to align certain items to the start or end of the toolbar. It will never appear in the overflow menu, and it will never cause other items to collapse.

How It Works

When the toolbar is initialized, it's creating a virtual clone of itself to measure the full size of all the children. Then, it starts to collapse the items one by one, starting from the lowest priority, and measures the width of the toolbar after each collapse.

Here we have the virtual toolbar in debug mode. You can run the debug measurement step by clicking the button below:

Using a ResizeObserver, it listens for changes to the original toolbar's size, and based on the measurements from the virtual toolbar, it determines which items should be collapsed or expanded to fit the available space.

When an item is collapsed, it's moved to an internal overflow menu, which can be accessed through a trigger button that appears at the end of the toolbar when there are overflowed items.

<le-toolbar> will automatically wrap every child element (except the ones with slot="more" attribute) in <le-visibility> component to manage their visibility with an animation.

If you don't want your <le-button-group> to be automatically collapsed by the toolbar, just add collapse attribute and it will be collapsed as a whole and not each button individually.

Properties / Attributes

@align-items

Specifies the alignment of all items in the start, center, or even the end of the toolbar.

<le-toolbar>
  <le-button-group overflow-icons label="Navigation">
    <le-button label="Back" icon-only="arrow-left"></le-button>
    <le-button label="Forward" icon-only="arrow-right"></le-button>
  </le-button-group>
</le-toolbar>

<le-toolbar align-items="center">
  <le-button-group overflow-icons label="Navigation">
    <le-button label="Back" icon-only="arrow-left"></le-button>
    <le-button label="Forward" icon-only="arrow-right"></le-button>
  </le-button-group>
</le-toolbar>

<le-toolbar align-items="end">
  <le-button-group overflow-icons label="Navigation">
    <le-button label="Back" icon-only="arrow-left"></le-button>
    <le-button label="Forward" icon-only="arrow-right"></le-button>
  </le-button-group>
</le-toolbar>

@disable-popover

Specifies whether the popover functionality is disabled for the toolbar. When disabled, user should provide an alternative way to access the overflowed items, such as a separate menu button. This can be useful in cases where the default popover behavior may not be desirable or accessible.

@item-gap

Gap between items in the toolbar. This can be set to a specific numeric value (e.g. 8 or 16) or any CSS-valid length, including variables (e.g. 8px, var(--le-spacing-8, 5rem), etc.). The default gap is 8.

<le-toolbar>
  <le-button-group overflow-icons label="Navigation">
    <le-button label="Back" icon-only="arrow-left"></le-button>
    <le-button label="Forward" icon-only="arrow-right"></le-button>
  </le-button-group>
</le-toolbar>

<le-toolbar item-gap="16px">
  <le-button-group overflow-icons label="Navigation">
    <le-button label="Back" icon-only="arrow-left"></le-button>
    <le-button label="Forward" icon-only="arrow-right"></le-button>
  </le-button-group>
</le-toolbar>

<le-toolbar item-gap="var(--le-spacing-8)">
  <le-button-group overflow-icons label="Navigation">
    <le-button label="Back" icon-only="arrow-left"></le-button>
    <le-button label="Forward" icon-only="arrow-right"></le-button>
  </le-button-group>
</le-toolbar>

Gap can be also set using CSS variable --le-toolbar-gap. Because of the animated collapse, the gap is actually included as inner margin for the children components, instead of actual spacing in the flex container.

@overflow-icon

In case you need a different icon for the overflow trigger button, you can use the @overflow-icon property.

Currently, only icons from the Le Kit icon set are supported, and you can specify them by name (e.g. chevron-down, ellipsis, etc.). If you need to use a custom icon, you can set the overflow trigger to an empty string and provide your own button with the slot more.

<le-toolbar overflow-icon="chevron-down">
  <le-button>Action 1</le-button>
  <le-button>Action 2</le-button>
  <le-button>Action 3</le-button>
  <le-button>Action 4</le-button>
  <le-button>Action 5</le-button>
  <le-button>Action 6</le-button>
</le-toolbar>

Slots

Default slot

The default slot is where you place the toolbar items, such as buttons and button groups. The toolbar will automatically manage the layout and overflow of these items based on the available space.

more

This named slot allows you to provide a custom trigger element for the overflow menu. If you set the @overflow-icon property to an empty string, the toolbar will not render a default trigger button, and you can use this slot to insert your own button or element that will toggle the overflow menu when clicked.

<le-toolbar>
  <le-button>Action 1</le-button>
  <le-button>Action 2</le-button>
  <le-button>Action 3</le-button>
  <le-button>Action 4</le-button>
  <le-button>Action 5</le-button>
  <le-button>Action 6</le-button>
  <div slot="more">
    <le-button variant="clear">More...</le-button>
  </div>
</le-toolbar>

Events

leToolbarOverflowChange

This event is emitted whenever the overflow state of the toolbar changes, such as when items are collapsed into or expanded out of the overflow menu.

Warning: The action for the leToolbarOverflowChange event is subject to change. It will emit LeOption objects representing the overflowed items.

Currently, the event detail includes information about which items are currently overflowed, allowing you to respond to these changes in your application logic if needed.