#Ribbon

A Ribbon combines tab navigation with grouped application commands. The pattern is extracted from A3S Office and generalized for editors, topology tools, and operational workbenches.

npm install github:A3S-Lab/UI#d2799d3914d2d291fbf0c2c3e638e2380ce266c0

<div class="ribbon tabs" data-accent="blue">
  <div role="tablist" aria-label="Editor commands">...</div>
  <div role="tabpanel">
    <fieldset data-ribbon-group><legend>Clipboard</legend>...</fieldset>
  </div>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

Load the Tabs controller and combine ribbon with tabs.

<div class="ribbon tabs" data-accent="blue">
  <div role="tablist" aria-label="Editor commands">...</div>
  <div role="tabpanel">
    <fieldset data-ribbon-group><legend>Clipboard</legend>...</fieldset>
  </div>
</div>

#Parameters

#States and variants

Blue suits documents and general workspaces, green suits spreadsheets or healthy operations, orange suits presentations, and purple suits agent workflows. Disabled tabs and commands use native disabled.

#JavaScript API

Ribbon behavior comes from the Tabs controller. window.a3sUI.refresh(ribbon) rescans dynamically added tabs. No Ribbon-specific JavaScript is required.

#Accessibility

Use the complete Tabs keyboard contract. Group commands with <fieldset> and a visible or screen-reader-only <legend>. If a ribbon becomes too dense, allow horizontal scrolling rather than shrinking labels below a readable size.