Set of tabs where the inactive tabs are represented as index numbers / icons and active tab shows the full tab title by expanding in width.
The problem with typical tabs pattern is that when the tab titles are longer there will be less number of tabs that can be placed in a fixed width real estate and this create a problem in smaller devices such as a iphone, where the width is limited.
To avoid this issue, you can use a new tabs pattern(I call it”Indexed Tabs” pattern ) shown here It can relatively adjust more tabs in the same available width. Specially useful in case of applications designed for mobile devices (iphones/androids etc.)
The active tab will shows the complete tab title there by clearly indicating that the corresponding tab view is served.
- Sample screenshots showing indexed tabs on a desktop where mouse is supported.
- In this example the width of the tabs area varies depending on the tab title length that effects the total horizontal real estate.
- In this example the selected tab width is set to a default value, that prevents the variation in the total tab area width.