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

      • 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

      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

      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.