<vcf-toolbar-layout>
is a LitElement‑based web component that manages overflowing menu items. It automatically moves overflowing items into a dedicated overflow popover, and it supports keyboard navigation, customizable theming, and grouping of items. While it works best with Vaadin web components, it supports any elements you choose to use.
- Overflow Handling:
Automatically moves overflowing menu items into a dedicated popover. - Configurable Collapse Debounce:
TheupdateDebounceDelay
property sets the debounce delay (in milliseconds) from when a resize event occurs until the overflow items are updated. - Reverse Collapse:
When thereverse-collapse
attribute is set, the component collapses items from the left side instead of the right. - Theming:
Two additional themes are provided (applied via thetheme
attribute):fixed-width-prefix
– aligns overflow popover items uniformly regardless of whether they include a prefix icon.hide-icons
– automatically hides icons on items within the overflow popover.
- Keyboard Navigation:
Complete keyboard support for menu navigation. - Grouping Items:
Group items by passing in a layout/container element; grouped items collapse and display together in the overflow popover.
Install the component via npm:
npm install @vaadin-component-factory/vcf-toolbar-layout
After installing, import the component into your application:
import '@vaadin-component-factory/vcf-toolbar-layout';
<vcf-toolbar-layout>
<vaadin-button>Button 1</vaadin-button>
<vaadin-button>Button 2</vaadin-button>
<vaadin-button>Button 3</vaadin-button>
</vcf-toolbar-layout>
<vcf-toolbar-layout reverse-collapse update-debounce-delay="100">
<vaadin-button>Left 1</vaadin-button>
<vaadin-button>Left 2</vaadin-button>
</vcf-toolbar-layout>
<vcf-toolbar-layout>
<div>
<vaadin-button>Grouped A</vaadin-button>
<vaadin-button>Grouped B</vaadin-button>
</div>
<vaadin-button>Solo</vaadin-button>
</vcf-toolbar-layout>
<vcf-toolbar-layout theme="fixed-width-prefix">
<vaadin-button theme="icon">
<vaadin-icon icon="vaadin:edit" slot="prefix"></vaadin-icon>
Edit
</vaadin-button>
<vaadin-button>
Save
</vaadin-button>
</vcf-toolbar-layout>
<vcf-toolbar-layout theme="hide-icons">
<vaadin-button theme="icon">
<vaadin-icon icon="vaadin:trash" slot="prefix"></vaadin-icon>
Delete
</vaadin-button>
<vaadin-button theme="icon">
<vaadin-icon icon="vaadin:download" slot="prefix"></vaadin-icon>
Download
</vaadin-button>
</vcf-toolbar-layout>
-
reverseCollapse
(Boolean):
When set (or used as thereverse-collapse
attribute), the component collapses items from the left side. -
updateDebounceDelay
(Number):
Sets the debounce delay (in milliseconds) from when a resize event occurs until the overflow items are updated—useful for managing performance during rapid resizes.
Clone the repository and install dependencies:
npm install
npm start
A demo page will launch in your browser, showcasing how <vcf-toolbar-layout>
handles overflow, reverse collapse, theming, grouping, and keyboard navigation.
Contributions are welcome! Please review our contributing guidelines before submitting pull requests.
Distributed under the Apache License 2.0. See LICENSE for details.
Major pieces of this component’s development have been sponsored by multiple Vaadin customers. Learn more about our support and pricing at Vaadin Pricing.