Ribbon Menu

The Ribbon Menu component organizes commands and controls into a Microsoft Office-style tabbed toolbar. Controls are grouped into sections with logical labels, featuring large actions, stacked columns of smaller actions, and embedded toggle/dropdown menus. The ribbon can also be collapsed or expanded dynamically.

Clipboard

Font

History

Illustrations

Tables

Zoom Settings

<div class="ribbon-container">
    <!-- Tabs Headers -->
    <div class="ribbon-tabs">
        <button class="ribbon-tab-btn active">Home</button>
        <button class="ribbon-tab-btn">Insert</button>
        <button class="ribbon-toggle-btn">▲</button>
    </div>

    <!-- Tabs Content -->
    <div class="ribbon-content">
        <div class="ribbon-tab-pane active">
            <!-- Clipboard Group -->
            <div class="ribbon-section">
                <div class="ribbon-group">
                    <button class="ribbon-btn large">
                        <span class="ribbon-icon">📋</span>
                        <span class="ribbon-label">Paste</span>
                    </button>
                    <div class="ribbon-column">
                        <button class="ribbon-btn small">
                            <span class="ribbon-icon">✂️</span>
                            <span class="ribbon-label">Cut</span>
                        </button>
                    </div>
                </div>
                <div class="ribbon-section-label">Clipboard</div>
            </div>
        </div>
    </div>
</div>

Markup & Collapsing API

Apply class ribbon-container to initialize the component.
Use ribbon-tab-btn for tab header buttons and ribbon-tab-pane inside ribbon-content for matching tab panes.
Inside each tab pane, use ribbon-section to wrap control clusters. Each section should feature a label with the class ribbon-section-label.
Buttons can be configured as large (vertical stack with a large icon), small (horizontal label/icon inline), or icon-only.
Adding class="ribbon-toggle-btn" inside the tab header bar will automatically hook expanding and collapsing functions.