previously Vue Storefront Build Better Storefronts


The Tabs allows users to navigate between related sections of content, providing easy access to information such as product details, customer reviews, or related items. Each tab represents a distinct section, ensuring a seamless and intuitive browsing experience.

Please note that if the total content within the tabs is substantial, it's important to consider potential performance impacts on page load time.

Accessibility notes

Tabs blocks implement WAI-ARIA Tabs pattern.

Basic Tabs

The Basic block offers essential tab functionality. This particular variant automatically activates when it receives focus, displaying its associated panel. It also provides horizontal scrolling functionality for tabs that exceed the viewport's width. This allows for seamless navigation and accessibility, ensuring that all tabs can be accessed and interacted with, even if they don't fit within the visible area. This block supports disabled tabs as well.