Tabs

Tabs are a way to group like items within a navigational context and often span the entire width of a content area. The active tab is clearly marked and content is separated into different panes, which are viewable individually within the same page.

Design System Guidelines

The tabs will become an option list on smaller breakpoints. Clicking on one of these options will open an off-canvas to reveal the tab content. You will need to duplicate the content from each tab into its own off-canvas, then duplicate the triggering interaction accordingly.

Standard Tabs

Standard Tabs with Overflow Controls

This version is only needed if you know that the number of tabs will exceed the available space. The controls in this example slide over by a single tab width, regardless of how many are off-screen, due to Webflow limitations. You can adjust these interactions to suit your specific use case.

Justified Tabs

Justified Tabs with Overflow Controls

This version is only needed if you know that the number of tabs will exceed the available space. The controls in this example slide over by a single tab width, regardless of how many are off-screen, due to Webflow limitations. You can adjust these interactions to suit your specific use case.

Justified Tabs with (optional) Supporting Text

Justified Tabs with (optional) Supporting Text and Overflow Controls

This version is only needed if you know that the number of tabs will exceed the available space. The controls in this example slide over by a single tab width, regardless of how many are off-screen, due to Webflow limitations. You can adjust these interactions to suit your specific use case.

Justified Tabs with (optional) Supporting Text and Image

Justified Tabs with (optional) Supporting Text, Image and Overflow Controls

This version is only needed if you know that the number of tabs will exceed the available space. The controls in this example slide over by a single tab width, regardless of how many are off-screen, due to Webflow limitations. You can adjust these interactions to suit your specific use case.

Centered Tabs

If you want overflow controls, then use the version from justified tabs as centered tabs become justified when there are enough of them.

Centered Tabs with (optional) Supporting Text

If you want overflow controls, then use the version from justified tabs as centered tabs become justified when there are enough of them.

Centered Tabs with (optional) Supporting Text and Image

If you want overflow controls, then use the version from justified tabs as centered tabs become justified when there are enough of them.

Vertical Tabs