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

      • Activity Bar

      An Activity Bar is the compact, persistent navigation surface used by A3S workspaces. It supports labeled and icon-only modes without changing the semantic navigation.

      Live previewHTML · CSS · JavaScript

      Usage

      <aside class="activity-bar" aria-label="Product navigation">
  <header>...</header>
  <nav aria-label="Primary"><ul>...</ul></nav>
  <footer>...</footer>
</aside>

      HTML structure

      Element or parameterRequiredPurpose
      <aside class="activity-bar">YesComponent root
      <nav aria-label="…">YesNames the navigation landmark
      <ul> and <li>YesNavigation collection
      aria-current="page"Current itemExposes and styles the active destination
      data-navigation-labelOptionalLabel hidden in compact mode
      data-labels="hidden"OptionalForces icon-only presentation on the root

      States and variants

      Use data-labels="hidden" for a standalone icon rail. Inside an App Shell, data-navigation="collapsed" hides labels automatically. Links support default, hover, focus-visible, and current states. Buttons additionally support aria-pressed="true" for in-place mode changes.

      Accessibility

      Keep labels in the DOM when collapsed. Every icon-only link or button still needs an accessible name. Use aria-current, not color alone, for the current page.