For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/ribbon.md.
A3S UI
  • English
  • next

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

      Live previewHTML · CSS · JavaScript
      Clipboard
      Font
      Paragraph

      Document canvas

      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

      ParameterValuesDefaultPurpose
      data-accentblue, green, orange, purpleblueProduct or document-kind accent
      role="tablist"—RequiredTab navigation container
      aria-selectedtrue, falseRequiredActive tab state
      aria-controls / aria-labelledbyElement IDsRequiredAssociates tabs and panels
      data-ribbon-group—RequiredCommand group layout
      data-ribbon-controls—RecommendedAligns commands above the group legend
      --ribbon-tabs-heightCSS length2.25remFixed tab-strip height
      --ribbon-panel-heightCSS length4.625remFixed command-panel height
      --ribbon-group-heightCSS length4.0625remFixed command-group height

      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.