Skip to content zachleat Project

🚾Web Component Star Search

A searchable catalog of standalone web components.

<vaadin-tabs>

`<vaadin-tabs>` is a Web Component for organizing and grouping content into sections.

Category
Navigation
Built with
Lit
Library
Vaadin
Author
Vaadin
Package
@vaadin/tabs
Component size
10.0 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size
19.9 kB JS (shared by every Vaadin component, loaded once per page)
Popular
3 out of 5
Downloads
60,915/week · jsDelivr 2,874 hits/month (whole @vaadin/tabs package)
Latest stable version
25.3.2
Last published
Component last changed
(in 25.3.0)
License
Apache-2.0

<vaadin-tabs> is a Web Component for organizing and grouping content into sections.

<vaadin-tabs selected="4">
  <vaadin-tab>Page 1</vaadin-tab>
  <vaadin-tab>Page 2</vaadin-tab>
  <vaadin-tab>Page 3</vaadin-tab>
  <vaadin-tab>Page 4</vaadin-tab>
</vaadin-tabs>

Styling

The following shadow DOM parts are available for styling:

Part name Description
back-button Button for moving the scroll back
tabs The tabs container
forward-button Button for moving the scroll forward

The following state attributes are available for styling:

Attribute Description
orientation Tabs disposition, valid values are horizontal and vertical
overflow It's set to start, end, none or both.

The following custom CSS properties are available for styling:

Custom CSS property
--vaadin-tabs-background
--vaadin-tabs-border-color
--vaadin-tabs-border-radius
--vaadin-tabs-border-width
--vaadin-tabs-font-size
--vaadin-tabs-font-weight
--vaadin-tabs-gap
--vaadin-tabs-padding

See Styling Components documentation.

Attributes

Events