Vertical Tabs in TabStrip Component

In most cases, tabs are placed on top side with horizontal orientation. The TabsStrip component has a built-in option that allows you to display tabs vertically. Vertical tabs are usually better to appear when tabs are placed on left or right side. This is useful in cases when tab title is longer than usual, so instead of horizontal orientation you can place them vertically.

The sample code below shows how to create vertical tabs in each JavaScript framework: Angular, React and Vue.

In above demo, you can choose tab orientation and placement. You can have different combinations, vertical tabs on left or right side, or horizontal tabs on top or bottom side of the tab strip.

How to Show Vertical Tabs

In order to change orientation of tabs, you can use the tabOrientation property. This property can accept one of the following values:

• Horizontal - tabs appear horizontally
• Vertical - tabs appear vertically

• JavaScript
• Angular
• React
• Vue

Horizontal orientation is most useful when tabs are positioned on top or bottom side. Vertical orientation is better when you have tabs with longer title and they are placed on left or right side.

Related: How to Place Tabs on Left or Right Side

Conclusion

TabStrip component has built-in option that allows you to change the tab orientation and set tabs to appear horizontally or vertically. Vertical tabs are usually better when placed on left or right side. In this way, there is more space for tab content and tab strip space is kept as minimal as possible.

IntegralUI Web is an UI library of native web components that includes the TabStrip. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.