Toolbars

Toolbars group a set of actions or tools in a horizontal or vertical bar. They provide quick access to frequently used functions within a specific context.

Overview

Toolbars are utility components that contain icon buttons, dropdown menus, or other controls. Unlike app bars which focus on navigation, toolbars are action-oriented and often appear within content areas like text editors, image editors, or data tables.

Live Preview

Brand Properties

The following table shows Toolbar properties with Material Design 3 defaults and brand-specific values.

Variants

• Horizontal Toolbar - Standard row of actions
• Vertical Toolbar - Column of actions, often for drawing/editing apps
• Floating Toolbar - Detached from edges, often appears contextually
• Segmented Toolbar - Grouped buttons with dividers
• Toolbar with Dropdowns - Contains select menus or combo boxes

Contents

• Icon Buttons - Primary toolbar actions
• Dividers - Vertical/horizontal lines to group related actions
• Dropdowns - For options like font, size, style
• Toggle Buttons - For on/off states (bold, italic)
• Color Pickers - For text/fill colors

Behavior

• Buttons can have selected/active state
• May show tooltips on hover
• Can be docked or floating
• May collapse into overflow menu on smaller screens
• Context-specific toolbars appear/hide based on selection

Accessibility

• Use role="toolbar" on the container
• Provide aria-label for the toolbar purpose
• Use aria-pressed for toggle button states
• Support arrow key navigation within toolbar
• All buttons must have accessible names
• Group related buttons with role="group"

Related Components

• App Bar
• Menus
• Action Buttons