> Markdown version of [Tabs](https://vaadin.com/docs/v23/components/tabs). Section index: [llms.txt](https://vaadin.com/docs/v23/components/llms.txt)

# Tabs

Tabs are used to organize and group content into sections that the user can navigate between.

**TypeScript** — `tabs-basic.ts`

```html
<vaadin-tabs>
  <vaadin-tab>Details</vaadin-tab>
  <vaadin-tab>Payment</vaadin-tab>
  <vaadin-tab>Shipping</vaadin-tab>
</vaadin-tabs>
```

**Java** — `TabsBasic.java`

```java
Tab details = new Tab("Details");
Tab payment = new Tab("Payment");
Tab shipping = new Tab("Shipping");

Tabs tabs = new Tabs(details, payment, shipping);
```

Use Tabs when you want to allow in-place navigation within a certain part of the UI, instead of showing everything at once or forcing the user to navigate between different views.

## <a id="tab-sheet"></a>Tab Sheet (since V23.3)

Tabs are most conveniently used as part of a Tab Sheet that includes automatically switched content areas for each tab.

**TypeScript** — `tabsheet-basic.ts`

```html
<vaadin-tabsheet>
  <vaadin-tabs slot="tabs">
    <vaadin-tab id="dashboard-tab">Dashboard</vaadin-tab>
    <vaadin-tab id="payment-tab">Payment</vaadin-tab>
    <vaadin-tab id="shipping-tab">Shipping</vaadin-tab>
  </vaadin-tabs>

  <div tab="dashboard-tab">This is the Dashboard tab content</div>
  <div tab="payment-tab">This is the Payment tab content</div>
  <div tab="shipping-tab">This is the Shipping tab content</div>
</vaadin-tabsheet>
```

**Java** — `TabSheetBasic.java`

```java
TabSheet tabSheet = new TabSheet();
tabSheet.add("Dashboard",
        new Div(new Text("This is the Dashboard tab content")));
tabSheet.add("Payment",
        new Div(new Text("This is the Payment tab content")));
tabSheet.add("Shipping",
        new Div(new Text("This is the Shipping tab content")));
add(tabSheet);
```

## <a id="states"></a>States

A Tab can be selected, unselected, or disabled.

**TypeScript** — `tabs-states.ts`

```html
<vaadin-tabs>
  <vaadin-tab>Selected</vaadin-tab>
  <vaadin-tab>Unselected</vaadin-tab>
  <vaadin-tab disabled>Disabled</vaadin-tab>
</vaadin-tabs>
```

**Java** — `TabsStates.java`

```java
Tab selected = new Tab("Selected");

Tab unselected = new Tab("Unselected");

Tab disabled = new Tab("Disabled");
disabled.setEnabled(false);

Tabs tabs = new Tabs(selected, unselected, disabled);
tabs.setSelectedTab(selected);
```

Disable a Tab to mark it as unavailable. Disabled Tabs can’t be focused and may be invisible to assistive technologies, such as screen readers.

Disabling can be preferable to hiding an element to prevent changes in layout when the element’s visibility changes. They can also make users aware of its existence even when unavailable.

### <a id="autoselect-java-only"></a>Autoselect (Java Only)

The first tab you add to Tabs or Tab Sheet is automatically selected. Similarly, when a selected tab is removed, the next available tab is automatically selected. Autoselect is enabled by default, but you can disable this behavior if needed.

`TabsAutoselect.java`

```java
Tabs tabs = new Tabs();
tabs.setAutoselect(false);
```

When using autoselect and tab selection change listeners, you should add selection change listeners before adding any tabs if you want the listeners to trigger for the automatically selected tab.

## <a id="orientation-and-overflow"></a>Orientation and Overflow

Tabs support two different orientations: horizontal (default) and vertical, which is not currently supported in Tab Sheets. Base your choice of orientation on the use case and the available space.

### <a id="horizontal"></a>Horizontal

Horizontal tabs may be easier for users to understand and associate with their content. They are best suited for a small number of items, but provide scrolling on overflow.

**TypeScript** — `tabs-horizontal.ts`

```html
<vaadin-tabs style="max-width: 100%; width: 400px;">
  <vaadin-tab>Analytics</vaadin-tab>
  <vaadin-tab>Customers</vaadin-tab>
  <vaadin-tab>Dashboards</vaadin-tab>
  <vaadin-tab>Documents</vaadin-tab>
  <vaadin-tab>Orders</vaadin-tab>
</vaadin-tabs>
```

**Java** — `TabsHorizontal.java`

```java
Tab analytics = new Tab("Analytics");
Tab customers = new Tab("Customers");
Tab dashboards = new Tab("Dashboards");
Tab documents = new Tab("Documents");
Tab orders = new Tab("Orders");

Tabs tabs = new Tabs(analytics, customers, dashboards, documents,
        orders);
tabs.setMaxWidth("100%");
tabs.setWidth("400px");
```

In horizontal orientation, scroll buttons are displayed by default in aid scrolling the tabs. These can be disabled by applying the `hide-scroll-buttons` theme variant.

**TypeScript** — `tabs-hide-scroll-buttons.ts`

```html
<vaadin-tabs theme="hide-scroll-buttons">
  <vaadin-tab>Analytics</vaadin-tab>
  <vaadin-tab>Customers</vaadin-tab>
  <vaadin-tab>Dashboards</vaadin-tab>
  <vaadin-tab>Documents</vaadin-tab>
  <vaadin-tab>Orders</vaadin-tab>
  <vaadin-tab>Products</vaadin-tab>
  <vaadin-tab>Tasks</vaadin-tab>
</vaadin-tabs>
```

**Java** — `TabsHideScrollButtons.java`

```java
Tab analytics = new Tab("Analytics");
Tab customers = new Tab("Customers");
Tab dashboards = new Tab("Dashboards");
Tab documents = new Tab("Documents");
Tab orders = new Tab("Orders");
Tab products = new Tab("Products");
Tab tasks = new Tab("Tasks");

Tabs tabs = new Tabs(analytics, customers, dashboards, documents,
        orders, products, tasks);
tabs.addThemeVariants(TabsVariant.LUMO_HIDE_SCROLL_BUTTONS);
```

> **Note:** Hiding the scroll buttons isn’t recommended for UIs designed to be operated on non-touchscreen devices, as horizontal scrolling can be difficult without them.

### <a id="vertical"></a>Vertical

<!-- vale Vaadin.Wordiness = NO -->

Vertical tabs can be a better choice for a large number of items. It’s easier for the user to scan a vertical list of options. However, they may not be easy to understand and associate with their content. Vertical tabs also provide scrolling on overflow, but no scroll buttons.

<!-- vale Vaadin.Wordiness = YES -->

**TypeScript** — `tabs-vertical.ts`

```html
<vaadin-tabs orientation="vertical" style="height: 240px; width: 240px;">
  <vaadin-tab>Analytics</vaadin-tab>
  <vaadin-tab>Customers</vaadin-tab>
  <vaadin-tab>Dashboards</vaadin-tab>
  <vaadin-tab>Documents</vaadin-tab>
  <vaadin-tab>Orders</vaadin-tab>
  <vaadin-tab>Products</vaadin-tab>
  <vaadin-tab>Tasks</vaadin-tab>
</vaadin-tabs>
```

**Java** — `TabsVertical.java`

```java
Tab analytics = new Tab("Analytics");
Tab customers = new Tab("Customers");
Tab dashboards = new Tab("Dashboards");
Tab documents = new Tab("Documents");
Tab orders = new Tab("Orders");
Tab products = new Tab("Products");
Tab tasks = new Tab("Tasks");

Tabs tabs = new Tabs(analytics, customers, dashboards, documents,
        orders, products, tasks);
tabs.setOrientation(Tabs.Orientation.VERTICAL);
tabs.setHeight("240px");
tabs.setWidth("240px");
```

Vertical orientation isn’t available for Tab Sheets.

## <a id="icons-and-other-tab-content"></a>Icons and Other Tab Content

Tabs can contain more than text.

### <a id="icons"></a>Icons

Icons can be used to make tabs more prominent and easier to identify. They can be added next to, or above, the labels.

Horizontal Tabs work best with icons above the labels.

**TypeScript** — `tabs-icons-horizontal.ts`

```html
<vaadin-tabs>
  <vaadin-tab theme="icon-on-top">
    <vaadin-icon icon="vaadin:user"></vaadin-icon>
    <span>Profile</span>
  </vaadin-tab>
  <vaadin-tab theme="icon-on-top">
    <vaadin-icon icon="vaadin:cog"></vaadin-icon>
    <span>Settings</span>
  </vaadin-tab>
  <vaadin-tab theme="icon-on-top">
    <vaadin-icon icon="vaadin:bell"></vaadin-icon>
    <span>Notifications</span>
  </vaadin-tab>
</vaadin-tabs>
```

**Java** — `TabsIconsHorizontal.java`

```java
Tab profile = new Tab(VaadinIcon.USER.create(), new Span("Profile"));
Tab settings = new Tab(VaadinIcon.COG.create(), new Span("Settings"));
Tab notifications = new Tab(VaadinIcon.BELL.create(),
        new Span("Notifications"));

// Set the icon on top
for (Tab tab : new Tab[] { profile, settings, notifications }) {
    tab.addThemeVariants(TabVariant.LUMO_ICON_ON_TOP);
}

Tabs tabs = new Tabs(profile, settings, notifications);
```

Vertical Tabs work best with icons next to labels.

**TypeScript** — `tabs-icons-vertical.ts`

```html
<vaadin-tabs orientation="vertical">
  <vaadin-tab>
    <vaadin-icon icon="vaadin:user"></vaadin-icon>
    <span>Profile</span>
  </vaadin-tab>
  <vaadin-tab>
    <vaadin-icon icon="vaadin:cog"></vaadin-icon>
    <span>Settings</span>
  </vaadin-tab>
  <vaadin-tab>
    <vaadin-icon icon="vaadin:bell"></vaadin-icon>
    <span>Notifications</span>
  </vaadin-tab>
</vaadin-tabs>
```

**Java** — `TabsIconsVertical.java`

```java
Tab profile = new Tab(VaadinIcon.USER.create(), new Span("Profile"));
Tab settings = new Tab(VaadinIcon.COG.create(), new Span("Settings"));
Tab notifications = new Tab(VaadinIcon.BELL.create(),
        new Span("Notifications"));

Tabs tabs = new Tabs(profile, settings, notifications);
tabs.setOrientation(Tabs.Orientation.VERTICAL);
```

Icon-only labels should provide a textual description using a [Tooltip](https://vaadin.com/docs/v23/components/tooltip.md) (since V23.3), or an `aria-label` attribute for assistive technologies.

### <a id="other-elements"></a>Other Elements

Tabs can contain almost any UI elements, such as badges indicating the number of items per tab.

**TypeScript** — `tabs-badges.ts`

```html
<!--
  NOTE: You need import the 'lumo-badge' style sheets to use theme="badge"
-->
<vaadin-tabs>
  <vaadin-tab>
    <span>Open</span>
    <span theme="badge small contrast">24</span>
  </vaadin-tab>
  <vaadin-tab>
    <span>Completed</span>
    <span theme="badge small contrast">439</span>
  </vaadin-tab>
  <vaadin-tab>
    <span>Cancelled</span>
    <span theme="badge small contrast">5</span>
  </vaadin-tab>
</vaadin-tabs>
```

**Java** — `TabsBadges.java`

```java
Tab open = new Tab(new Span("Open"), createBadge(24));
Tab completed = new Tab(new Span("Completed"), createBadge(439));
Tab cancelled = new Tab(new Span("Cancelled"), createBadge(5));

Tabs tabs = new Tabs(open, completed, cancelled);
```

## <a id="theme-variants"></a>Theme Variants

### <a id="centered"></a>Centered

By default, Tabs are left-aligned. They can be centered using the `centered` theme variant.

**TypeScript** — `tabs-theme-centered.ts`

```html
<vaadin-tabs theme="centered">
  <vaadin-tab>Details</vaadin-tab>
  <vaadin-tab>Payment</vaadin-tab>
  <vaadin-tab>Shipping</vaadin-tab>
</vaadin-tabs>
```

**Java** — `TabsThemeCentered.java`

```java
Tab details = new Tab("Details");
Tab payment = new Tab("Payment");
Tab shipping = new Tab("Shipping");

Tabs tabs = new Tabs(details, payment, shipping);
tabs.addThemeVariants(TabsVariant.LUMO_CENTERED);
```

**Usage Recommendations**

- Visual and stylistic preference.

- Typically used for top-level navigation.

- Use with caution: default left-aligned tabs are more discoverable.

### <a id="equal-width-tabs"></a>Equal-Width Tabs

Apply the `equal-width-tabs` theme variant to make each Tab share equally the available space. This disables the ability to scroll, as the content never overflows.

**TypeScript** — `tabs-theme-equal-width.ts`

```html
<vaadin-tabs theme="equal-width-tabs">
  <vaadin-tab>Details</vaadin-tab>
  <vaadin-tab>Payment</vaadin-tab>
  <vaadin-tab>Shipping</vaadin-tab>
</vaadin-tabs>
```

**Java** — `TabsThemeEqualWidth.java`

```java
Tab details = new Tab("Details");
Tab payment = new Tab("Payment");
Tab shipping = new Tab("Shipping");

Tabs tabs = new Tabs(details, payment, shipping);
tabs.addThemeVariants(TabsVariant.LUMO_EQUAL_WIDTH_TABS);
```

**Usage Recommendations**

For a small number of tabs in a narrow space, such as:

- Tabbed sidebar; and

- Mobile (portrait) layouts.

### <a id="minimal"></a>Minimal

Reduces visual styles to a minimum.

**TypeScript** — `tabs-theme-minimal.ts`

```html
<vaadin-tabs theme="minimal">
  <vaadin-tab>Details</vaadin-tab>
  <vaadin-tab>Payment</vaadin-tab>
  <vaadin-tab>Shipping</vaadin-tab>
</vaadin-tabs>
```

**Java** — `TabsThemeMinimal.java`

```java
Tab details = new Tab("Details");
Tab payment = new Tab("Payment");
Tab shipping = new Tab("Shipping");

Tabs tabs = new Tabs(details, payment, shipping);
tabs.addThemeVariants(TabsVariant.LUMO_MINIMAL);
```

**Usage Recommendations**

- To reduce visual clutter.

- Use with caution, as this reduces the visual distinction of selected tabs to color only. This can be difficult to discern for many users.

### <a id="small"></a>Small

The `small` theme variant can be used to make the Tabs smaller. This can be good when space is limited.

**TypeScript** — `tabs-theme-small.ts`

```html
<vaadin-tabs theme="small">
  <vaadin-tab>Details</vaadin-tab>
  <vaadin-tab>Payment</vaadin-tab>
  <vaadin-tab>Shipping</vaadin-tab>
</vaadin-tabs>
```

**Java** — `TabsThemeSmall.java`

```java
Tab details = new Tab("Details");
Tab payment = new Tab("Payment");
Tab shipping = new Tab("Shipping");

Tabs tabs = new Tabs(details, payment, shipping);
tabs.addThemeVariants(TabsVariant.LUMO_SMALL);
```

### <a id="bordered"></a>Bordered

The `bordered` theme variant adds a border around the Tab Sheet component.

**TypeScript** — `tabsheet-theme-bordered.ts`

```html
<vaadin-tabsheet theme="bordered">
  <vaadin-tabs slot="tabs">
    <vaadin-tab id="dashboard-tab">Dashboard</vaadin-tab>
    <vaadin-tab id="payment-tab">Payment</vaadin-tab>
    <vaadin-tab id="shipping-tab">Shipping</vaadin-tab>
  </vaadin-tabs>

  <div tab="dashboard-tab">This is the Dashboard tab content</div>
  <div tab="payment-tab">This is the Payment tab content</div>
  <div tab="shipping-tab">This is the Shipping tab content</div>
</vaadin-tabsheet>
```

**Java** — `TabSheetThemeBordered.java`

```java
tabSheet.addThemeVariants(TabSheetVariant.LUMO_BORDERED);
```

## <a id="prefix-and-suffix"></a>Prefix and Suffix (since V23.3)

Custom content can be placed before or after the tabs in a Tab Sheet by placing it in the `prefix` and `suffix` slots.

**TypeScript** — `tabsheet-prefix-suffix.ts`

```html
<vaadin-button slot="prefix">Close all</vaadin-button>

<vaadin-button slot="suffix" theme="icon" aria-label="Add tab">
  <vaadin-icon icon="vaadin:plus"></vaadin-icon>
</vaadin-button>
```

**Java** — `TabSheetPrefixSuffix.java`

```java
tabSheet.setPrefixComponent(new Button("Close all"));

Button plusButton = new Button(new Icon(VaadinIcon.PLUS));
plusButton.addThemeVariants(ButtonVariant.LUMO_ICON);
plusButton.getElement().setAttribute("aria-label", "Add tab");
tabSheet.setSuffixComponent(plusButton);
```

## <a id="focus-and-keyboard"></a>Focus and Keyboard

Tab focus is rendered differently when focused by keyboard.

**TypeScript** — `tabs-focus-ring.ts`

```typescript
<vaadin-tabs>
  <vaadin-tab focus-ring>Details</vaadin-tab>
  <vaadin-tab>Payment</vaadin-tab>
  <vaadin-tab>Shipping</vaadin-tab>
</vaadin-tabs>
```

Once a tab is focused, arrow keys can be used to move the focus between tabs. Press `Enter` or `Space` to select the focused tab.

## <a id="common-cases"></a>Common Cases

### <a id="content-switching-without-tab-sheet"></a>Content Switching without Tab Sheet

Using the integrated content areas in Tab Sheet (since V23.3) is the easiest way to switch between the different content for each tab. Sometimes, such as when the tabs need to be separated structurally from their content areas, it may be necessary to use the stand-alone Tabs component and implement content switching, manually.

**TypeScript** — `tabs-content.ts`

```typescript
<vaadin-tabs @selected-changed="${this.selectedChanged}">
  <vaadin-tab>Dashboard</vaadin-tab>
  <vaadin-tab>Payment</vaadin-tab>
  <vaadin-tab>Shipping</vaadin-tab>
</vaadin-tabs>

<vaadin-vertical-layout theme="padding">
  <p>${this.content}</p>
</vaadin-vertical-layout>
```

**Java** — `TabsContent.java`

```java
details = new Tab("Details");
payment = new Tab("Payment");
shipping = new Tab("Shipping");

Tabs tabs = new Tabs(details, payment, shipping);
tabs.addSelectedChangeListener(
        event -> setContent(event.getSelectedTab()));
```

### <a id="lazy-initialization-of-tab-contents"></a>Lazy Initialization of Tab Contents

Sometimes it can be desirable to initialize the contents for a tab, lazily. That is to say, delay its initialization until the tab is selected.

**TypeScript** — `tabsheet-lazy-initialization.ts`

```html
@state()
private visitedTabs = new Set<number>();

private selectedTabChanged(event: TabSheetSelectedChangedEvent) {
  this.visitedTabs = new Set([...this.visitedTabs, event.detail.value]);
}

protected override render() {
  return html`
    <vaadin-tabsheet @selected-changed=${this.selectedTabChanged}>
      <vaadin-tabs slot="tabs">
        <vaadin-tab id="dashboard-tab">Dashboard</vaadin-tab>
        <vaadin-tab id="payment-tab">Payment</vaadin-tab>
        <vaadin-tab id="shipping-tab">Shipping</vaadin-tab>
      </vaadin-tabs>

      ${this.visitedTabs.has(0)
        ? html`<div tab="dashboard-tab">This is the Dashboard tab content</div>`
        : ''}
      ${this.visitedTabs.has(1)
        ? html`<div tab="payment-tab">This is the Payment tab content</div>`
        : ''}
      ${this.visitedTabs.has(2)
        ? html`<div tab="shipping-tab">This is the Shipping tab content</div>`
        : ''}
    </vaadin-tabsheet>
  `;
}
```

**Java** — `TabSheetLazyInitialization.java`

```java
tabSheet.add("Dashboard", new LazyComponent(
            () -> new Text("This is the Dashboard tab content")));

public class LazyComponent extends Div {
    public LazyComponent(
            SerializableSupplier<? extends Component> supplier) {
        addAttachListener(e -> {
            if (getElement().getChildCount() == 0) {
                add(supplier.get());
            }
        });
    }
}
```

## <a id="related-components"></a>Related Components

| Component                                                        | Usage recommendations                                                                                    |
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| [Accordion](https://vaadin.com/docs/v23/components/accordion.md) | An accordion is a vertically stacked set of expandable panels.                                           |
| [Details](https://vaadin.com/docs/v23/components/details.md)     | The Details component is an expandable panel for showing and hiding content to make the UI less crowded. |

`D66CE920-3532-41D6-9EB3-C2B91F77CC40`