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. |