Docs

Docs

Tabs

Tabs are used to organize and group content into sections that the user can navigate between.
<Tabs>
  <Tab>Details</Tab>
  <Tab>Payment</Tab>
  <Tab>Shipping</Tab>
</Tabs>

States

A Tab can be selected, unselected, or disabled.

<Tabs>
  <Tab>Selected</Tab>
  <Tab>Unselected</Tab>
  <Tab disabled>Disabled</Tab>
</Tabs>

Orientation

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 give scrolling on overflow.

Vertical tabs can be a better choice for many 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 offer scrolling on overflow, but no scroll buttons.

<Tabs orientation="vertical">
  <Tab>Analytics</Tab>
  <Tab>Customers</Tab>
  <Tab>Dashboards</Tab>
  <Tab>Documents</Tab>
  <Tab>Orders</Tab>
  <Tab>Products</Tab>
  <Tab>Tasks</Tab>
</Tabs>
Important
 You can find more information in the corresponding article on vaadin.com.