#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.

#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. The default 36-pixel tab strip and 74-pixel command panel match A3S Office; compact viewports keep tabs unshrunk and scroll them horizontally.

#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.