Tabs

    Use the Tabs Component to organize different views of the same information or switch between similar or related data sets. The Tabs is visually identical to the Ignite UI for Angular Tabs Component

    Tabs Demo

    Size

    The Tabs are available in two sizes tall, showing icons with text, and short, containing either text or icons but not both at the same time.

    Responsive

    The Tabs can be Content Fit to fill up the available horizontal space by adapting their width, or Fixed with scrolling buttons to navigate a large number of tab items. This allows fitting more content than what is normally possible with the other mode in the same total space.

    Tabs Amount

    For most scenarios, the Tabs need to contain between two and five items. To remove an item in Sketch, set its override to ~No Symbol and the smart layout will adjust the remaining ones. To achieve the same in Adobe XD, you should delete the unnecessary items and the Stack will take care to lay out the remaining ones. If your use case requires more than five tabs, you should consider the Fixed mode explained above.

    Short Bar Content

    The short bar comes with text content by default. If you want to show an icon instead, you have to assign a Material Icon to the 🔣 Icon override and set the 🏷️ Label to ~No Symbol in Sketch for every tab in the bar. To achieve a similar result in Adobe XD make sure that either 🔣 Icon or 🏷️ Label layer exists and is visible, and the other one has been deleted for every tab in the bar.

    Tab Item State

    Tab items support Active, Inactive and Disabled states. In Sketch this is achieved with Symbol Overrides, while in Adobe XD we are using the Component States paradigm to let you easily switch between states. In Tabs there is always one Active tab and an arbitrary number of Inactive and Disabled ones.

    Styling

    The Tabs provide basic styling flexibility through the options available for text and icon colors, the indicator color that marks the current selection, as well as the active/inactive background colors.

    Usage

    The Tabs are appropriate for organizing information, and one should avoid using them as a way to design workflows and actions that come in a logical sequence, e.g. checkout process or configuration wizard. When using the short Tabs, never combine a text tab with an icon tab in the same bar. Choose one of the two content modes and use it consistently for all the items in the bar.

    Do Don't

    Additional Resources

    Related topic:

    Our community is active and always welcoming to new ideas.