Tabs

Overview

The tabs component is used to group related content in a compact format, reducing the need for long scrolling pages and allowing users to navigate between sections of content easily.

Basic usage

Importing the component

To use the tabs component, import both the DsTabs and DsTab components along with the necessary styles.

                                                        
                                                        
                                                            import { DsTabs, DsTab } from "@coloplast/design-system";
                                                        import "@coloplast/design-system/dist/components/tabs/ds-tabs.css";
                                                        
                                                            

Example usage

Here’s an example of how to implement tabs in your Vue template. Each tab is represented by a DsTab component, and DsTabs serves as the wrapper.

                                                        
                                                        
                                                            <DsTabs overflowMenuButtonLabel="More tabs">
                                                             <DsTab name="Tab one" id="tab-1">
                                                                 <h2>Your tab content goes here</h2>
                                                                 <p>This is slot content</p>
                                                             </DsTab>
                                                             <DsTab name="Tab two" id="tab-2">
                                                                 <h2>Remember to add more than one tab</h2>
                                                                 <p>The component won't render unless you have 2 or more tabs</p>
                                                             </DsTab>
                                                        </DsTabs>
                                                        
                                                            

Responsive behaviour

When the tabs exceed the available screen width, an overflow menu appears to contain the hidden tabs. On touch devices, users can still scroll through the tabs, and the overflow menu will provide access to tabs not currently visible.

Ensure the overflowMenuButtonLabel prop is set to label the button that opens the overflow menu.

Component playground and props

Experiment with the tabs component in Storybook to explore various configurations and see how different props affect its behavior. Adjust settings in real time to suit your design needs.

Accessibility

• The tab navigation uses the tablist role, with individual tab buttons assigned the tab role.
• Tabs are associated with their content panels via aria-controls, and the selected tab has aria-selected="true".
• Tab panels use the tabpanel role for better assistive technology support.
• Keyboard navigation is supported, allowing users to navigate between tabs using arrow, home/end keys, and select tabs with space/enter keys.
• The overflow menu is fully accessible, using aria-label, aria-haspopup, aria-controls, and aria-expanded for interaction with assistive technologies.

Internationalisation

The tabs component supports right-to-left (RTL) rendering and handles long text via the overflow menu. All titles and labels can be customised through props or slot content.