Multiline Tabs in TabStrip Component
In general, tabs appear in single line in the tabs strip. When tab strip contains multiple tabs, a set of scroll buttons will appear which you can use to scroll to specific tab. In some cases, instead of using scrolling, it's better to show tabs in multiple lines.
There is a sample code below written in JavaScript, Angular, React and Vue that shows how to create multiline tabs.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this example, tabs appear in multiple lines. You can also change the side at which tabs are shown: Top, Right, Bottom or Left. All tabs occupy the whole space of the tab strip using the justified display mode.
Whenever tab strip size changes, the tabs are rearranged and number of lines can increase or decrease on demand.
In following sections below, you will find a sample code in JavaScript, Angular, React and Vue.
How to Display Tabs in Multiple Lines
By default, the multi-line display mode is disabled and tabs appear in one line with scrolling on demand. To show tabs in multiple lines, you need to set the navigation property to Multiline. This property accepts the following values:
- Normal - shows tabs in single line
- Multiline - shows tabs in multiple lines
When tabs are displayed in multiple lines, they also require the Justified display mode so that there is no empty space in each tab line. In addition, when tab strip resizes, this automatically rearranges the tabs and the number of tab lines can change on demand.
You can have different layouts, when you combine multi-line tabs setting with change of tab placement and orientation. For example, tabs with vertical orientation and placement set to left or right side of the tab strip. This may help you to organize tabs in different ways.
Conclusion
When you have many tabs to show, depending on the tab strip space instead of displaying tabs in single line and using scrolling, it may be better to display tabs in multiple lines. Multi-line tabs are dynamic, their position and the number of tab lines is determined by current tab strip size. Any changes to the size, will rearrange tabs in multiple lines on demand.
IntegralUI Web is a suite 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.