Toolbar Layout Flow - Vaadin Add-on Directory
The ToolbarLayout component manages overflowing menu items - automatically moving overflowing items into a dedicated overflow popover.
# Toolbar Layout
ToolbarLayout is a server-side Vaadin component built on top of the [](https://github.com/vaadin-component-factory/vcf-toolbar-layout) web component. The ToolbarLayout component manages overflowing menu items - automatically moving overflowing items into a dedicated overflow popover. The component supports additional features such as keyboard navigation, customizable theming, and grouping of items.
This component is part of Vaadin Component Factory.
## Features
- **Overflow Handling:**
Automatically moves overflowing menu items into a dedicated popover.
- **Reverse Collapse:**
Set the component to collapse items from the left side instead of the right.
- **Configurable Collapse Debounce:**
Set the debounce delay (in milliseconds) from when a resize event occurs until the overflow items are updated.
- **Theming:**
Two additional themes are provided:
- **`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 (such as HorizontalLayout); grouped items collapse and display together in the overflow popover.
## How to Use
### Basic Usage
```java
ToolbarLayout toolbarLayout = new ToolbarLayout();
toolbarLayout.add(
new Button("Button 1"),
new Button("Button 2"),
new Button("Button 3"),
new Button("Button 4")
);
```
### Reverse Collapse
```java
ToolbarLayout toolbarLayout = new ToolbarLayout();
toolbarLayout.setReverseCollapseOrder(true);
addComponentsToToolbar(toolbarLayout);
```
### Debounce Delay
```java
ToolbarLayout toolbarLayout = new ToolbarLayout();
toolbarLayout.setUpdateDebounceDelay(500);
addComponentsToToolbar(toolbarLayout);
```
### Multi-level Menu
```java
ToolbarLayout toolbarLayout = new ToolbarLayout();
// adding an item via the addItem(String) api returns a MenuItem which can be used to add submenus
MenuItem basicMenu = toolbarLayout.addItem("Basic Menu");
basicMenu.getSubMenu().addItem("Child Item 1");
basicMenu.getSubMenu().addItem("Child Item 2");
// the same addItem(String, Icon) api but which includes an icon
MenuItem basicMenuWithIcon = toolbarLayout.addItem("Basic Menu w/ Icon", VaadinIcon.MENU.create());
basicMenuWithIcon.getSubMenu().addItem("Child Item 1");
basicMenuWithIcon.getSubMenu().addItem("Child Item 2");
// you can also create your own MenuBar and add it to the ToolbarLayout
MenuBar menuBar = new MenuBar();
MenuItem menuBarItem = menuBar.addItem("Menu Bar");
menuBarItem.getSubMenu().addItem("Child Item 1");
menuBarItem.getSubMenu().addItem("Child Item 2");
toolbarLayout.add(menuBar);
```
### Grouped Items
```java
toolbarLayout.add(
new HorizontalLayout(
new Button("Button 1"),
new Button("Button 2")
),
new Button("Button 3"),
new Button("Button 4")
);
```
### Theming
#### Fixed Width Prefix
```java
ToolbarLayout toolbarLayout = new ToolbarLayout();
toolbarLayout.addThemeVariants(ToolbarLayoutVariant.FIXED_WIDTH_PREFIX);
TextField search = new TextField();
search.setPlaceholder("Search");
search.setSuffixComponent(VaadinIcon.SEARCH.create());
Button download = new Button("Download");
download.setIcon(VaadinIcon.DOWNLOAD.create());
Button edit = new Button("Edit");
edit.setIcon(VaadinIcon.COG.create());
edit.setIconAfterText(true);
Button save = new Button("Save");
save.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
MenuBar dropdown = new MenuBar();
dropdown.addThemeVariants(MenuBarVariant.LUMO_DROPDOWN_INDICATORS);
SubMenu subMenu = dropdown.addItem("Dropdown Menu").getSubMenu();
subMenu.addItem("Item 1");
subMenu.addItem("Item 2");
Anchor link = new Anchor("https://vaadin.com", "Vaadin");
link.setTarget("_blank");
toolbarLayout.add(search, download, edit, save, dropdown, link);
```
#### Hide Icons
```java
ToolbarLayout toolbarLayout = new ToolbarLayout();
toolbarLayout.addThemeVariants(ToolbarLayoutVariant.HIDE_ICONS);
Button prefix = new Button("Prefix", VaadinIcon.BACKWARDS.create());
Button suffix = new Button("Suffix", VaadinIcon.FORWARD.create());
suffix.setIconAfterText(true);
Button iconOnly = new Button("Icon Only", VaadinIcon.COG.create());
iconOnly.addThemeVariants(ButtonVariant.LUMO_ICON);
toolbarLayout.add(prefix, suffix, iconOnly);
```
### Sponsored development
Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: [Support](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing).
Online DemoView on GitHub
Toolbar Layout Flow version 1.0.0
Toolbar Layout Flow version 1.0.1
* Updated web component to latest version 1.0.1
Toolbar Layout Flow version 1.0.2
### What's Changed
* feat: moving demo app to spring boot and adding docker support
* feat: add ability to provide custom overflow button by
Full Changelog: [1.0.1...1.0.2](https://github.com/vaadin-component-factory/vcf-toolbar-layout-flow/releases/tag/1.0.2)
Toolbar Layout Flow version 2.0.0
Vaadin 25 support
Toolbar Layout Flow version 2.0.1
Update web-component version to 2.0.1.
This new version contains styling fixes missed in previous version 2.0.0.
Toolbar Layout Flow version 2.0.2
#### Bug fixes:
* Update web-component dependency to version [2.0.2](https://github.com/vaadin-component-factory/vcf-toolbar-layout/releases/tag/2.0.2)
Toolbar Layout Flow version 2.0.3
#### Bug fixes:
Update web-component version to 2.0.3.
This new web-component version contains a fix to move the overflow button styles from ShadowDOM to global scope.
Toolbar Layout Flow version 2.1.0
Adopt web component 2.1.0 accessibility fixes and expose overflow button i18n.
Requires Vaadin 25.2+