Tabs Component Breakdown

Overview

The dd-tabs component provides a tabbed interface for organizing content into switchable panels. It supports desktop navigation and a mobile dropdown menu, with ARIA attributes for accessibility, making it suitable for FAQs, product details, or multi-section content without page reloads.

This component is ideal for content-heavy pages where space-saving is key. In WordPress, configure it via ACF repeater fields for tab items (e.g., label, content, links). In Drupal, use a Paragraph type with fields for tab titles and bodies, rendered with unique data-id for scoping multiple instances.

Basic Usage

Wrap tabs in a div with class dd-tabs and a unique data-id. Include navigation with menu items (ARIA roles) and content panels with aria-hidden and role="tabpanel".

Preview

Code

<div class="dd-tabs" data-id="003">
  <div class="dd-tabs__content dd-g">
    <ul class="dd-tabs__menu dd-g" role="tablist">
      <li class="dd-tabs__menu-item" role="presentation">
        <a  class="dd-tabs__menu-link -active" id="tab-001" role="tab" aria-selected="true" aria-controls="tabpanel-001">open tab 1</a>
      </li>
      <li class="dd-tabs__menu-item" role="presentation">
        <a href="#tab-002" class="dd-tabs__menu-link" id="tab-002" role="tab" aria-selected="false" aria-controls="tabpanel-002">open tab 2</a>
      </li>
      <li class="dd-tabs__menu-item" role="presentation">
        <a href="#tab-003" class="dd-tabs__menu-link" id="tab-003" role="tab" aria-selected="false" aria-controls="tabpanel-003">open tab 3</a>
      </li>
    </ul>
    <div class="dd-tabs__items dd-g">
      <div class="dd-tabs__item dd-u-1-1 -active" role="tabpanel" id="tabpanel-001" aria-hidden="false" aria-labelledby="tab-001">
        <p>tab panel 001</p>
      </div>
      <div class="dd-tabs__item dd-u-1-1" role="tabpanel" id="tabpanel-002" aria-hidden="false" aria-labelledby="tab-002">
        <p>tab panel 002</p>
      </div>
      <div class="dd-tabs__item dd-u-1-1" role="tabpanel" id="tabpanel-003" aria-hidden="false" aria-labelledby="tab-003">
        <p>tab panel 003</p>
      </div>
    </div>
  </div>
</div>

Use unique IDs for tabs and panels; JS handles switching and mobile toggle.

CSS Modifiers (from _dd_tabs.scss)

The SCSS file defines base styles for tabs, including responsive navigation (hidden menu on mobile), active states, and overflow handling. Key modifiers include:

• -active: Applied to active menu items and panels for visibility and styling.
• -horizontal: Adjusts for horizontal tab layouts if extended.
• -vertical: For vertical tab orientations (sidebar style).
• Utility classes like SAL data attributes (e.g., data-sal="fade") for panel animations.

Associated JavaScript (from dd_tabs.js)

The component includes a JS file handling mobile menu toggle and tab switching with ARIA updates. Key features:

• Toggles -active class on mobile menu open/close.
• Switches tabs on click, updating aria-selected, aria-hidden, and active classes, scoped by aria-controls.
• Updates mobile placeholder text to current tab label.
• Supports multiple tab groups on a page via aria-controls and panel ID.

Include the JS via your CMS: In WordPress, enqueue in functions.php; in Drupal, attach via libraries.yml.

For ACF/Paragraphs integration, generate unique aria-controls from fields.

Framework files

• source/js/components/_dd_tabs.js (javascript)
• source/scss/components/_dd_tabs.scss (styles)

Accessibility and Best Practices

Use ARIA roles (tablist, tab, tabpanel) and attributes (aria-selected, aria-controls, aria-labelledby, aria-hidden). Ensure keyboard navigation (focus on tabs, enter/space to activate). Test with screen readers for announcements. In CMS, require unique labels and validate content for empty panels.