🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Pivot Bar Overflow

View in Pattern Lab

HTML Markup

<div class="hoo-pivotbar has-overflow" role="menubar">
    <div class="hoo-overflow">
        <button class="hoo-button-pivot is-active"><span class="hoo-pivot-inner" title="Coffee">Coffee</span>
    </button>
    <button class="hoo-button-pivot"><span class="hoo-pivot-inner" title="Matcha">Matcha</span>
</button>
<button class="hoo-button-pivot"><span class="hoo-pivot-inner" title="Ice Tea">Ice Tea</span>
</button>
<button class="hoo-button-pivot"><span class="hoo-pivot-inner" title="Aqua Minerale">Aqua Minerale</span>
</button>
<button class="hoo-button-pivot"><span class="hoo-pivot-inner" title="Earl Grey">Earl Grey</span>
</button>
<button class="hoo-button-pivot"><span class="hoo-pivot-inner" title="Darjeeling tea">Darjeeling tea</span>
</button>
<button class="hoo-button-pivot"><span class="hoo-pivot-inner" title="Chai Latte">Chai Latte</span>
</button>
<button class="hoo-button-pivot"><span class="hoo-pivot-inner" title="Gin Tonic">Gin Tonic</span>
</button>
<!--- Fixed element to handle overflow buttons -->
    <div class="hoo-buttonicon-overflow" aria-haspopup="true">
        <button class="hoo-buttonicon-flyout" aria-haspopup="true"><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
            <svg class="hoo-icon-svg icon-ellipses" aria-hidden="true">
                <use xlink:href="/htwoo-core/images/icons.svg#icon-ellipses">
                </use>
            </svg></span></span>
</button>
<menu class="hoo-buttonflyout">
</menu>
</div>
</div>
</div>

Pivot Bar Overflow

The Pivot Bar Overflow component provides a responsive pivot navigation that handles limited space by moving tabs to an overflow menu.

Overview

When horizontal space is limited, the Pivot Bar Overflow automatically hides pivot tabs that don’t fit and provides access to them through an overflow menu, ensuring all navigation options remain accessible.

Features

  • Responsive behavior using ResizeObserver API
  • Automatic overflow handling for tabs that don’t fit
  • Overflow menu with dropdown functionality
  • Proper ARIA attributes for accessibility
  • Hidden items marked with aria-hidden="true"
  • CSS class .has-overflow to enable overflow behavior
  • JavaScript-driven responsive calculations
  • Consistent styling with standard pivot bar

CSS Classes

  • .hoo-pivotbar - Main pivot bar container
  • .has-overflow - Enables overflow functionality
  • .hoo-overflow - Wrapper container for overflow items
  • .hoo-buttonpivot - Pivot buttons (visible and hidden)
  • .hoo-overflow-button - Overflow menu trigger
  • .is-overflow-item - Hidden pivot items

Overflow Configuration

Required Structure

  1. Container: .hoo-pivotbar.has-overflow
  2. Wrapper: .hoo-overflow around all pivot buttons
  3. Overflow Button: Button with overflow menu functionality
  4. Hidden Items: Buttons with .is-overflow-item class

CSS Classes for Overflow

  • .has-overflow - Enables overflow behavior on the pivot bar
  • .hoo-overflow - Required wrapper for overflow calculation
  • .is-overflow-item - Applied to hidden pivot items
  • .hoo-overflow-button - Overflow menu trigger styling

JavaScript Integration

The overflow functionality requires JavaScript files:

  • overflow.js: Handles ResizeObserver and overflow calculations
  • pivot.js: Manages pivot state and overflow menu cloning

Key JavaScript Features

  • ResizeObserver: Monitors container size changes
  • Dynamic Overflow: Moves tabs in/out of overflow menu
  • Menu Cloning: Clones overflow items into dropdown menu
  • State Management: Maintains pivot selection across overflow

Initialization

Responsive Behavior

Overflow Strategy

  1. Full Width: All pivot tabs display normally
  2. Reduced Width: Less important tabs move to overflow
  3. Narrow Width: Only critical tabs remain visible
  4. Overflow Menu: Hidden tabs accessible via dropdown

ResizeObserver Integration

The component uses the ResizeObserver API to:

  • Monitor container width changes
  • Trigger overflow calculations on resize
  • Respond to dynamic content changes
  • Handle browser zoom and viewport changes

States and Attributes

ARIA Attributes

  • role="menubar" - Pivot bar semantic role
  • role="menuitem" - Individual pivot buttons
  • aria-pressed="true|false" - Active pivot state
  • aria-haspopup="menu" - Overflow button has dropdown
  • aria-expanded="false|true" - Overflow menu state
  • aria-hidden="true" - Hidden overflow items

Visual States

  • Visible: Standard pivot button display
  • Hidden: Overflow items with aria-hidden="true"
  • Active: Selected pivot with aria-pressed="true"
  • Overflow Menu: Dropdown containing hidden items

Usage Guidelines

  • Add .has-overflow class to enable overflow functionality
  • Wrap pivot buttons in .hoo-overflow container
  • Include overflow button with proper ARIA attributes
  • Test responsive behavior at different screen sizes
  • Ensure overflow menu is keyboard accessible
  • Prioritize pivot tabs based on importance
  • Consider mobile touch targets and interaction

Browser Support

  • ResizeObserver: Modern browsers (IE11+ with polyfill)
  • Flexbox: All modern browsers
  • CSS Grid: Used for overflow calculations
  • JavaScript: ES6+ features

SCSS

Accessibility

  • Uses role="menubar" for semantic identification
  • Implements proper ARIA attributes for overflow menu
  • Includes aria-hidden="true" for hidden items
  • Supports keyboard navigation (Tab, Enter, Space, Arrow keys)
  • Provides clear focus indicators
  • Maintains logical tab order through visible pivots
  • Announces overflow menu state to screen readers
  • Follows responsive design accessibility principles