AppSidebar

AppSidebar mantém os destinos de uma aplicação à vista. Escolha a porta de children quando os links precisarem preservar o comportamento do router; escolha groups para uma interface rápida de seleção baseada em botões.

Exemplos

Links compostos e trilho de ícones

Passe filhos SidebarGroup quando a aplicação for dona do routing. Ao recolher, a barra vira um trilho de 64px e fornece tooltips nativos e nomes acessíveis a seus descendentes de link a partir do texto.

Grupos convenientes

groups transforma cada item em botão e informa seu id por onSelect. Seu label é uma string de propósito, para que o trilho sempre possa nomear o botão e mostrar um tooltip nativo.

Selected: Overview

Quando usar

Use AppSidebar para destinos agrupados e persistentes no shell de uma aplicação.

Prefira outro componente quando:

Uma linha curta de rotas no nível do site é suficiente — use Navbar.
Os destinos são visualizações pares na página atual — use Tabs.
Você precisa de apenas uma seção de navegação — use SidebarGroup.

Acessibilidade

AppSidebar renderiza um <nav> nativo. Passe aria-label para ele quando a página tiver mais de um landmark de navegação.
No modo groups, os itens são botões nativos; um item ativo recebe aria-current="page". O callback do item roda antes do callback onSelect(id, item) da barra lateral.
No modo de composição, os filhos permanecem seus elementos originais. Use âncoras reais para rotas; no modo trilho, descendentes de link recebem title e aria-label de um rótulo explícito, título ou de seu conteúdo textual.
O controle de recolhimento é um botão nativo cujo nome acessível e tooltip vêm de labels. No modo trilho, rótulos de grupo, texto de item e badges ficam visualmente ocultos, enquanto os nomes dos controles e itens continuam disponíveis.

API e código

Nome	Tipo	Obrigatória	Descrição
`brand`	`ReactNode`	—	Optional brand content placed above the navigation groups.
`groups`	`AppSidebarGroup[]`	—	Convenience data mode. Each group is composed through {@link SidebarGroup} and renders its items as buttons.
`footer`	`ReactNode`	—	Optional utility links or user content separated below the navigation groups.
`width`	`number`	—	Sidebar width in pixels while expanded. Default: `260`.
`collapsible`	`boolean`	—	Whether to render a control that switches between expanded and icon-rail modes.
`collapsed`	`boolean`	—	Controlled icon-rail state.
`defaultCollapsed`	`boolean`	—	Initial icon-rail state when uncontrolled.
`onCollapsedChange`	`(collapsed: boolean) => void`	—	Called whenever the icon-rail state changes.
`onSelect`	`(id: string, item: AppSidebarGroupItem) => void`	—	Called after an item-level callback in data mode.
`labels`	`AppSidebarLabels`	—	Localized labels for the collapse control.
`children`	`ReactNode`	—	Composition mode. Pass {@link SidebarGroup} children (including link children) to preserve their original element type and routing behavior instead of using data-mode buttons.

x-data="lyraAppSidebar({ … })"

Opção	Tipo	Obrigatória	Descrição
`defaultCollapsed`	`boolean`	—	Whether the sidebar starts in its icon-rail state. Default: `false`.
`width`	`number`	—	Sidebar width in pixels while expanded. Default: `260`.
`labels`	`LyraAppSidebarLabels`	—	Localized labels for the collapse control.

A porta de links compostos é uma marcação de navegação comum. Fora do React, implemente o recolhimento, os rótulos do trilho e a seleção:

html

<nav class="lyra-appsidebar" aria-label="Navegação do espaço de trabalho">
  <div class="lyra-appsidebar__brand"><strong>Acme</strong></div>
  <div class="lyra-appsidebar__groups">
    <div class="lyra-sbgroup">
      <div class="lyra-sbgroup__label">Espaço de trabalho</div>
      <div class="lyra-sbgroup__items">
        <a
          class="lyra-sbgroup__item lyra-sbgroup__item--active"
          href="/overview"
          aria-current="page"
        >
          <span class="lyra-sbgroup__item-label">Visão geral</span>
        </a>
      </div>
    </div>
  </div>
</nav>

<lyra:app-sidebar> Gerado do lyra-ds/blade v0.10.0.

O comportamento vem de lyraAppSidebar() — instale @lyra-ds/alpine e veja a aba HTML + Alpine.

Prop	Padrão	Obrigatória	Valores de exemplo
`brand`	`null`	—	—
`groups`	`[]`	—	—
`footer`	`null`	—	—
`width`	`260`	—	—
`collapsible`	`false`	—	—
`defaultCollapsed`	`false`	—	—
`labels`	`[]`	—	—

blade

<lyra:app-sidebar
    :groups="[
        ['heading' => 'Workspace', 'items' => [
            ['id' => 'overview', 'label' => 'Overview', 'active' => true],
            ['id' => 'projects', 'label' => 'Projects', 'badge' => '12'],
        ]],
        ['heading' => 'Account', 'items' => [
            ['id' => 'billing', 'label' => 'Billing'],
            ['id' => 'settings', 'label' => 'Settings'],
        ]],
    ]"
    collapsible
/>