🚧 Under Construction

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

Command Bar Overflow

View in Pattern Lab

HTML Markup

<div class="hoo-cmdbar has-overflow" role="toolbar">
    <div class="hoo-overflow">
        <div class="hoo-buttoncmd"  aria-haspopup="true"  >
            <button class="hoo-buttoncmd" aria-haspopup="true"><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
                <svg class="hoo-icon-svg icon-plus" aria-hidden="true">
                    <use xlink:href="/htwoo-core/images/icons.svg#icon-plus">
                    </use>
                </svg></span></span><span class="hoo-button-label">New Item</span><span class="hoo-button-icon hoo-buttonchevron"><span class="hoo-icon">
    <svg class="hoo-icon-svg icon-arrow-down" aria-hidden="true">
        <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-down">
        </use>
    </svg></span></span>
</button>
<menu class="hoo-buttonflyout">
    <li class="hoo-buttonflyout-item">
        <button class="hoo-buttonaction"><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
            <svg class="hoo-icon-svg icon-ninjacat" aria-hidden="true">
                <use xlink:href="/htwoo-core/images/icons.svg#icon-ninjacat">
                </use>
            </svg></span></span><span class="hoo-button-label">Email message</span>
</button>
</li>
<li class="hoo-buttonflyout-item">
    <button class="hoo-buttonaction"><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
        <svg class="hoo-icon-svg icon-minus" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-minus">
            </use>
        </svg></span></span><span class="hoo-button-label">Calendar Event</span>
</button>
</li>
</menu>
</div>
<div class="hoo-buttoncmd"  >
    <button class="hoo-buttoncmd" ><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
        <svg class="hoo-icon-svg icon-plus" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-plus">
            </use>
        </svg></span></span><span class="hoo-button-label">New Item</span>
</button>
</div>
<div class="hoo-buttoncmd"  aria-haspopup="true"  >
    <button class="hoo-buttoncmd" aria-haspopup="true"><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
        <svg class="hoo-icon-svg icon-plus" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-plus">
            </use>
        </svg></span></span><span class="hoo-button-label">New Item</span><span class="hoo-button-icon hoo-buttonchevron"><span class="hoo-icon">
<svg class="hoo-icon-svg icon-arrow-down" aria-hidden="true">
    <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-down">
    </use>
</svg></span></span>
</button>
<menu class="hoo-buttonflyout">
    <li class="hoo-buttonflyout-item">
        <button class="hoo-buttonaction"><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
            <svg class="hoo-icon-svg icon-ninjacat" aria-hidden="true">
                <use xlink:href="/htwoo-core/images/icons.svg#icon-ninjacat">
                </use>
            </svg></span></span><span class="hoo-button-label">Email message</span>
</button>
</li>
<li class="hoo-buttonflyout-item">
    <button class="hoo-buttonaction"><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
        <svg class="hoo-icon-svg icon-minus" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-minus">
            </use>
        </svg></span></span><span class="hoo-button-label">Calendar Event</span>
</button>
</li>
</menu>
</div>
<div class="hoo-buttoncmd"  >
    <button class="hoo-buttoncmd" ><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
        <svg class="hoo-icon-svg icon-plus" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-plus">
            </use>
        </svg></span></span><span class="hoo-button-label">New Item</span>
</button>
</div>
<div class="hoo-buttoncmd"  aria-haspopup="true"  >
    <button class="hoo-buttoncmd" aria-haspopup="true"><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
        <svg class="hoo-icon-svg " aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#">
            </use>
        </svg></span></span><span class="hoo-button-label">New Item</span><span class="hoo-button-icon hoo-buttonchevron"><span class="hoo-icon">
<svg class="hoo-icon-svg icon-arrow-down" aria-hidden="true">
    <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-down">
    </use>
</svg></span></span>
</button>
<menu class="hoo-buttonflyout">
    <li class="hoo-buttonflyout-item">
        <button class="hoo-buttonaction"><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
            <svg class="hoo-icon-svg icon-ninjacat" aria-hidden="true">
                <use xlink:href="/htwoo-core/images/icons.svg#icon-ninjacat">
                </use>
            </svg></span></span><span class="hoo-button-label">Email message</span>
</button>
</li>
<li class="hoo-buttonflyout-item">
    <button class="hoo-buttonaction"><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
        <svg class="hoo-icon-svg icon-minus" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-minus">
            </use>
        </svg></span></span><span class="hoo-button-label">Calendar Event</span>
</button>
</li>
</menu>
</div>
<div class="hoo-buttoncmd"  >
    <button class="hoo-buttoncmd" ><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
        <svg class="hoo-icon-svg icon-plus" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-plus">
            </use>
        </svg></span></span><span class="hoo-button-label">New Item</span>
</button>
</div>
<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>

Command Bar Overflow

The Command Bar Overflow component provides a responsive command bar that handles limited space by moving items to an overflow menu.

Overview

When screen space is limited, the Command Bar Overflow automatically hides less important commands in an overflow menu, ensuring the most critical actions remain visible while maintaining accessibility and usability.

Features

  • Responsive behavior that adapts to available space
  • Automatic overflow handling for commands that don’t fit
  • Overflow menu with “More” button trigger
  • Proper ARIA attributes for accessibility
  • Hidden items marked with aria-hidden="true"
  • CSS class .is-overflow-item for styling hidden items
  • Support for all command button variants
  • Consistent visual design with standard command bar

CSS Classes

  • .hoo-cmdbar - Main command bar container
  • .hoo-buttoncmd - Command buttons (visible and hidden)
  • .hoo-overflow-button - Overflow menu trigger button
  • .is-overflow-item - Hidden command items in overflow

Overflow Behavior

Responsive Strategy

  1. Available Space: Commands display normally in horizontal layout
  2. Limited Space: Less critical commands move to overflow menu
  3. Very Limited Space: Only most important commands remain visible
  4. Overflow Menu: Hidden commands accessible via “More” button

Priority System

Commands typically overflow in this order (least to most important):

  1. Secondary actions (Share, Print)
  2. Editing actions (Format, Style)
  3. Primary actions (New, Save, Edit)

States and Attributes

ARIA Attributes

  • role="toolbar" - Command bar semantic role
  • aria-haspopup="menu" - Indicates overflow button opens a menu
  • aria-expanded="false|true" - Overflow menu state
  • aria-hidden="true" - Hidden overflow items

CSS Classes

  • .is-overflow-item - Applied to hidden commands
  • .hoo-overflow-button - Overflow menu trigger styling

JavaScript Integration

Overflow behavior typically requires JavaScript for:

  • Responsive calculations: Measuring available space
  • Dynamic overflow: Moving items in/out of overflow menu
  • Menu management: Opening/closing overflow menu
  • Accessibility updates: Managing ARIA attributes

Example JavaScript Pattern

Usage Guidelines

  • Prioritize commands based on user importance and frequency
  • Use meaningful labels for the overflow menu trigger (“More”, “Additional actions”)
  • Include proper ARIA attributes for overflow menu interaction
  • Test responsive behavior at different screen sizes
  • Ensure keyboard navigation works through visible and overflow commands
  • Consider touch targets on mobile devices
  • Implement proper focus management when overflow menu opens/closes

Accessibility

  • Uses role="toolbar" for semantic toolbar identification
  • Implements proper ARIA attributes for overflow menu
  • Includes aria-hidden="true" for hidden overflow items
  • Supports keyboard navigation (Tab, Enter, Space, Escape)
  • Provides clear focus indicators for all interactive elements
  • Maintains logical tab order through visible commands
  • Announces overflow menu state changes to screen readers

SCSS