Skip to content

Enhanced Tabs

A Vaadin Flow add-on that provides a tabs component which automatically collapses tabs that don't fit the available width into an overflow menu.

Overview

Use the Enhanced Tabs add-on as a drop-in alternative to the standard Vaadin Tabs component for in-place navigation within a section of the UI. Its distinguishing behavior is responsive overflow handling: when the container is too narrow to show all tabs, the extra tabs collapse into an overflow menu at the end instead of overflowing or wrapping. It is a good fit when you have a variable number of tabs, limited horizontal space, or responsive layouts where the tab bar width can change. Its API closely mirrors Vaadin Tabs, so it is easy to adopt in existing code.

Features

  • Tabs that don't fit the current width collapse automatically into an overflow menu at the end.
  • API similar to the standard Vaadin Tabs component (add/remove/replace tabs, selection by index or tab, selection change events).
  • Auto-selection of the first tab, which can be disabled.
  • Configurable overflow submenu trigger: open on hover or on click (setOpenOnHover).
  • Support for router links as tabs via addRouterLink(...).
  • Selected-change event exposing the previous tab, the selected tab, and initial-selection detection.

Supported versions

Add-on version Vaadin version
1.x 14, 22, 23, 24, 25

Refer to the Vaadin Directory page for exact version compatibility.

Installation

From the Vaadin Directory

Available in the Vaadin Directory.

Maven dependency

<dependency>
    <groupId>com.flowingcode.vaadin.addons</groupId>
    <artifactId>enhanced-tabs-addon</artifactId>
    <version>X.Y.Z</version>
</dependency>

Replace X.Y.Z with the latest released version. Add the Vaadin add-ons repository to your pom.xml:

<repository>
    <id>vaadin-addons</id>
    <url>https://maven.vaadin.com/vaadin-addons</url>
</repository>

For snapshot builds, see maven.flowingcode.com/snapshots.

JavaDoc is published at javadoc.flowingcode.com.

Usage

Create an EnhancedTabs, add tabs, and listen for selection changes:

EnhancedTabs tabs = new EnhancedTabs();
tabs.add(new Tab("First tab"));
tabs.addSelectedChangeListener(ev ->
    Notification.show("Tab selected: " + ev.getSelectedTab().getElement().getText()));

Construct with several tabs and control the overflow-menu behavior — tabs that don't fit collapse into a menu automatically:

EnhancedTabs tabs = new EnhancedTabs(
    new Tab("Dashboard"), new Tab("Orders"), new Tab("Customers"),
    new Tab("Reports"), new Tab("Settings"));
tabs.setOpenOnHover(false); // open the overflow submenu on click instead of hover
tabs.setWidth("300px");

Use router links as tabs for navigation:

EnhancedTabs nav = new EnhancedTabs();
nav.addRouterLink("Home", HomeView.class);
nav.addRouterLink("About", AboutView.class);

Special configuration when using Spring

When running on Spring, allow-list the com.flowingcode package so Vaadin Flow can discover the add-on's components. See Common configuration for details.

API reference

Headline types exposed by the add-on:

  • EnhancedTabs — the tabs component; extends Composite<MenuBar> and implements HasEnabled, HasSize, HasStyle. Constructors: EnhancedTabs(), EnhancedTabs(Tab... tabs), EnhancedTabs(boolean autoselect, Tab... tabs). Key methods: add(Tab...), remove(Tab...), removeAll(), replace(Tab, Tab), addRouterLink(String, Class<? extends Component>), getSelectedIndex() / setSelectedIndex(int), getSelectedTab() / setSelectedTab(Tab), setAutoselect(boolean), setOpenOnHover(boolean), getTabs(), and addSelectedChangeListener(...).
  • EnhancedTabs.SelectedChangeEvent — fired on selection change; getSelectedTab(), getPreviousTab(), isInitialSelection().

For the full API surface, browse the published JavaDoc.

Demo

A live demo is available at addonsv25.flowingcode.com/enhanced-tabs. To run the demo locally:

git clone https://github.com/FlowingCode/EnhancedTabs.git
cd EnhancedTabs
mvn clean install jetty:run

Then open http://localhost:8080/.

Source code

EnhancedTabs on GitHub — distributed under Apache License 2.0.