Sidebar Componentes

O que é

Uma Sidebar de produto completa — combina workspace no topo, navegação agrupada e rolável, indicadores, submenus, ações contextuais e perfil no rodapé. Pode operar expandida, reduzida a ícones, flutuante, escura ou como drawer mobile.

Como funciona

O sw-sidebar-mode define o comportamento e sw-sidebar-variant define a apresentação. No modo collapse, a largura muda para um rail e os labels viram tooltips. Estado, foco, ARIA, Escape, overlay e persistência são administrados pelo próprio módulo.

Exemplos

<div class="sdb-demo-shell">
<aside sw-sidebar sw-sidebar-mode="collapse" sw-sidebar-variant="command" sw-sidebar-persist id="sidebarApp">
  <div sw-sidebar-hdr>
    <span sw-sidebar-hdr-ico><i class="swi-flash"></i></span>
    <span sw-sidebar-workspace><b>Nexora Control</b><small>Workspace 04</small></span>
    <button sw-sidebar-tgl aria-label="Recolher"><i class="swi-sidebar"></i></button>
  </div>
  <div sw-sidebar-search><input type="search" placeholder="Buscar"><kbd>⌘K</kbd></div>
  <nav sw-sidebar-mn>
    <span sw-sidebar-grp-ttl>Workspace</span>
    <a sw-sidebar-it act data-sw-tip="Visão geral" href="#"><i class="swi-home"></i><span sw-sidebar-item-copy><b>Visão geral</b><small>Operação em tempo real</small></span><span sw-sidebar-live></span></a>
    <a sw-sidebar-it data-sw-tip="Projetos" href="#"><i class="swi-folder"></i><span sw-sidebar-item-copy><b>Projetos</b><small>12 ambientes ativos</small></span><span sw-sidebar-badge>12</span></a>
    <a sw-sidebar-it sw-sidebar-sub href="#">
      <i class="swi-grid-alt"></i><span sw-sidebar-item-copy><b>Produtos</b><small>Catálogo e estoque</small></span>
      <i class="swi-chevron-down" sw-sidebar-arrow></i>
    </a>
    <div sw-sidebar-sub-items>
      <div><a sw-sidebar-it href="#"><span sw-sidebar-lbl>Catálogo</span></a><a sw-sidebar-it href="#"><span sw-sidebar-lbl>Estoque</span></a></div>
    </div>
    <span sw-sidebar-grp-ttl>Gestão</span>
    <a sw-sidebar-it data-sw-tip="Equipe" href="#"><i class="swi-user"></i><span sw-sidebar-lbl>Equipe</span></a>
    <a sw-sidebar-it data-sw-tip="Relatórios" href="#"><i class="swi-chart"></i><span sw-sidebar-lbl>Relatórios</span></a>
  </nav>
  <div sw-sidebar-ftr><a sw-sidebar-user href="#"><span sw-sidebar-avatar>SM</span><span sw-sidebar-user-info><b>Sandro Martins</b><small>Administrador</small></span></a></div>
</aside>
</div>

<div class="sdb-demo-shell is-dark-stage">
<aside sw-sidebar sw-sidebar-mode="fixed" sw-sidebar-variant="floating dark">
  <div sw-sidebar-hdr><span sw-sidebar-hdr-ico><i class="swi-terminal"></i></span><span sw-sidebar-hdr-ttl>Ops Center</span></div>
  <nav sw-sidebar-mn>
    <span sw-sidebar-grp-ttl>Monitoramento</span>
    <a sw-sidebar-it act href="#"><i class="swi-dashboard"></i><span sw-sidebar-lbl>Overview</span></a>
    <a sw-sidebar-it href="#"><i class="swi-server"></i><span sw-sidebar-lbl>Servidores</span><span sw-sidebar-badge>8</span></a>
    <a sw-sidebar-it href="#"><i class="swi-bell"></i><span sw-sidebar-lbl>Incidentes</span><span sw-sidebar-badge>3</span></a>
  </nav>
</aside></div>

<div class="sdb-mobile-demo">
  <button sw-btn class="sw-btn-pri" sw-sidebar-open="#sidebarMobile"><i class="swi-menu"></i> Abrir navegação</button>
  <aside sw-sidebar sw-sidebar-mode="toggle" id="sidebarMobile" hid aria-label="Menu mobile">
    <div sw-sidebar-hdr><span sw-sidebar-hdr-ico>M</span><span sw-sidebar-hdr-ttl>Minha conta</span></div>
    <nav sw-sidebar-mn>
      <a sw-sidebar-it act href="#"><i class="swi-home"></i><span sw-sidebar-lbl>Início</span></a>
      <a sw-sidebar-it href="#"><i class="swi-user"></i><span sw-sidebar-lbl>Perfil</span></a>
      <a sw-sidebar-it href="#"><i class="swi-cog"></i><span sw-sidebar-lbl>Preferências</span></a>
    </nav>
  </aside>
</div>

Atributos

Variantes

Eventos

API (JavaScript)

Requisitos

• O overlay do modo toggle é criado automaticamente.
• Itens somente com ícone precisam de data-sw-tip ou aria-label.

Limitações — o que ele não faz

• A busca é uma região visual pronta; a estratégia de filtro ou command palette pertence ao aplicativo.
• Em touch, o modo hover deve ser acompanhado por um acionador explícito.