Menu e âncora · Abstra Design System

Início

Boas práticas

Tema

Idiomas e RTL

App e cabeçalho

Layout

Tipografia

Abas

Menu e âncora

Dropdown e popover

Command e toggles

Botão

Campos

Seleção e valores

Combobox e menções

Datas e calendário

Árvore e cascata

Transfer

Upload

Filtros

Tabela

Planilha

KPI e estatística

Badge e tag

Listas e detalhes

Gráficos

Imagem e carrossel

Ícones

Diagramas

Alertas e estados

Progresso e passos

Diálogo e toast

Drawer e notificação

Utilitários

Overview

Work queue

Report

Report com htmx

Form / request

Tabela administrativa

Página de detalhe

Formulário em diálogo

Gráfico com dados do servidor

Buscar…

llms.txt

Tema

Tema

Restaurar

Copiar prompt

Copiar snippet

Prompt: para as instruções de um agente. Snippet: direto no templates/base.html.

v0.11.0

Navigation menu for sidebars and top bars (antd Menu).

Menu lateral com submenus

Itens com value (ou href para navegar), ícone, badge com contagem e submenus que expandem com animação. O item atual recebe aria-current; ab-select informa o value.

Selecionado: pagar

<ab-split side-width="16rem" gap="5"> <ab-card slot="side" padding="sm"> <ab-menu id="side-menu" label="Financeiro" value="pagar"> <ab-menu-item value="painel" icon="squares-four">Painel</ab-menu-item> <ab-submenu label="Contas" icon="wallet"> <ab-menu-item value="pagar" badge="12">A pagar</ab-menu-item> <ab-menu-item value="receber" badge="3">A receber</ab-menu-item> <ab-menu-item value="conciliacao">Conciliação</ab-menu-item> </ab-submenu> <ab-submenu label="Documentos" icon="file-text"> <ab-menu-item value="notas">Notas fiscais</ab-menu-item> <ab-menu-item value="contratos">Contratos</ab-menu-item> <ab-submenu label="Arquivados"> <ab-menu-item value="2025">2025</ab-menu-item> <ab-menu-item value="2024">2024</ab-menu-item> </ab-submenu> </ab-submenu> <ab-menu-item value="relatorios" icon="chart-bar">Relatórios</ab-menu-item> <ab-menu-item value="config" icon="gear" disabled>Configurações</ab-menu-item> <ab-menu-item value="sair" icon="sign-out" danger>Sair</ab-menu-item> </ab-menu> </ab-card> <ab-card heading="Conteúdo"><p style="margin:0">Selecionado: <code id="side-out">pagar</code></p></ab-card> </ab-split> <script type="module"> document.getElementById("side-menu").addEventListener("ab-select", (e) => { document.getElementById("side-out").textContent = e.detail.value; }); </script>

Grupos e navegação do site

ab-menu-group dá um título a uma seção de itens. Para navegar entre páginas use href nos itens e value com o endereço da página atual (ou current no item): ele recebe aria-current="page". size="md" deixa as linhas com 32px, para listas longas como a barra lateral destes docs.

Início

App e cabeçalho

Menu e âncora

Tabela

Gráficos

<ab-card padding="sm" style="max-width: 16rem"> <ab-menu size="md" label="Documentação" value="#grupos-e-navegacao-do-site"> <ab-menu-item href="#inicio" icon="house">Início</ab-menu-item> <ab-menu-group label="Layout"> <ab-menu-item href="#app" icon="squares-four">App e cabeçalho</ab-menu-item> <ab-menu-item href="#grupos-e-navegacao-do-site" icon="list">Menu e âncora</ab-menu-item> </ab-menu-group> <ab-menu-group label="Exibição de dados"> <ab-menu-item href="#tabela" icon="rows">Tabela</ab-menu-item> <ab-menu-item href="#graficos" icon="chart-bar">Gráficos</ab-menu-item> </ab-menu-group> </ab-menu> </ab-card>

Recolhido (só ícones)

collapsed deixa o menu com 56px; os rótulos viram dica (title) e submenus abrem ao lado.

Expandir

<ab-stack gap="3"> <ab-cluster><ab-button id="collapse-toggle" size="sm" icon="sidebar">Expandir</ab-button></ab-cluster> <ab-card padding="sm" style="width: fit-content"> <ab-menu id="mini-menu" collapsed label="Atalhos" value="inbox"> <ab-menu-item value="inbox" icon="tray" badge="8">Caixa de entrada</ab-menu-item> <ab-menu-item value="calendario" icon="calendar">Calendário</ab-menu-item> <ab-submenu label="Equipe" icon="users"> <ab-menu-item value="pessoas">Pessoas</ab-menu-item> <ab-menu-item value="permissoes">Permissões</ab-menu-item> </ab-submenu> <ab-menu-item value="ajustes" icon="gear">Ajustes</ab-menu-item> </ab-menu> </ab-card> </ab-stack> <script type="module"> const menu = document.getElementById("mini-menu"); const btn = document.getElementById("collapse-toggle"); btn.addEventListener("click", () => { menu.collapsed = !menu.collapsed; btn.textContent = menu.collapsed ? "Expandir" : "Recolher"; }); </script>

Menu horizontal

mode horizontal: submenus abrem como painéis flutuantes (clique, passe o mouse ou ↓). Esc fecha e devolve o foco; o indicador desliza até o item atual.

Visão geral

Pedidos

DRE

Fluxo de caixa

ICMS

ISS

Clientes

<ab-menu mode="horizontal" label="Seções" value="visao"> <ab-menu-item value="visao" icon="house">Visão geral</ab-menu-item> <ab-menu-item value="pedidos" icon="receipt" badge="5">Pedidos</ab-menu-item> <ab-submenu label="Relatórios" icon="chart-line-up"> <ab-menu-item value="dre">DRE</ab-menu-item> <ab-menu-item value="fluxo">Fluxo de caixa</ab-menu-item> <ab-submenu label="Fiscal"> <ab-menu-item value="icms">ICMS</ab-menu-item> <ab-menu-item value="iss">ISS</ab-menu-item> </ab-submenu> </ab-submenu> <ab-menu-item value="clientes" icon="users">Clientes</ab-menu-item> </ab-menu>

Âncora para página longa

ab-anchor destaca a seção visível e rola suavemente até ela. Aqui a política rola dentro de uma caixa (container); numa página inteira, omita container, use offset para descontar o cabeçalho fixo e deixe a âncora sticky com CSS.

1. Objetivo

Esta política define como despesas corporativas são solicitadas, aprovadas e reembolsadas, garantindo controle, transparência e conformidade fiscal.

Aplica-se a todos os colaboradores, estagiários e prestadores que realizem gastos em nome da empresa.

2. Despesas elegíveis

São reembolsáveis deslocamentos a trabalho, hospedagem, alimentação em viagem e materiais aprovados previamente pelo gestor.

2.1 Viagens

Passagens aéreas devem ser compradas com pelo menos 7 dias de antecedência, em classe econômica. Hospedagem limitada a R$ 450,00 por diária em capitais.

2.2 Refeições

O limite diário é de R$ 120,00. Bebidas alcoólicas não são reembolsadas. Refeições com clientes precisam indicar os participantes.

3. Comprovantes

Todo gasto precisa de nota fiscal ou cupom legível com CNPJ. Fotos são aceitas desde que todos os campos estejam visíveis.

Comprovantes devem ser enviados em até 30 dias da data da despesa.

4. Prazos de reembolso

Solicitações aprovadas até o dia 20 são pagas na folha do mês corrente. Após essa data, entram no ciclo seguinte.

Pedidos com pendência voltam ao solicitante e reiniciam a contagem.

5. Exceções

Casos não previstos devem ser aprovados pela diretoria financeira antes da realização da despesa.

Dúvidas: financeiro@empresa.com.br.

<div class="policy-layout"> <article id="policy-article" tabindex="0" aria-label="Política de despesas"> <h3 id="pol-objetivo">1. Objetivo</h3> <p>Esta política define como despesas corporativas são solicitadas, aprovadas e reembolsadas, garantindo controle, transparência e conformidade fiscal.</p> <p>Aplica-se a todos os colaboradores, estagiários e prestadores que realizem gastos em nome da empresa.</p> <h3 id="pol-elegiveis">2. Despesas elegíveis</h3> <p>São reembolsáveis deslocamentos a trabalho, hospedagem, alimentação em viagem e materiais aprovados previamente pelo gestor.</p> <h4 id="pol-viagens">2.1 Viagens</h4> <p>Passagens aéreas devem ser compradas com pelo menos 7 dias de antecedência, em classe econômica. Hospedagem limitada a R$ 450,00 por diária em capitais.</p> <h4 id="pol-refeicoes">2.2 Refeições</h4> <p>O limite diário é de R$ 120,00. Bebidas alcoólicas não são reembolsadas. Refeições com clientes precisam indicar os participantes.</p> <h3 id="pol-comprovantes">3. Comprovantes</h3> <p>Todo gasto precisa de nota fiscal ou cupom legível com CNPJ. Fotos são aceitas desde que todos os campos estejam visíveis.</p> <p>Comprovantes devem ser enviados em até 30 dias da data da despesa.</p> <h3 id="pol-prazos">4. Prazos de reembolso</h3> <p>Solicitações aprovadas até o dia 20 são pagas na folha do mês corrente. Após essa data, entram no ciclo seguinte.</p> <p>Pedidos com pendência voltam ao solicitante e reiniciam a contagem.</p> <h3 id="pol-excecoes">5. Exceções</h3> <p>Casos não previstos devem ser aprovados pela diretoria financeira antes da realização da despesa.</p> <p style="margin-bottom: 300px">Dúvidas: financeiro@empresa.com.br.</p> </article> <ab-anchor container="#policy-article" offset="8" label="Nesta política" id="policy-anchor"></ab-anchor> </div> <style> /* antd Anchor demo: content takes the remaining width, the TOC is a fixed 15rem column right next to it, tops aligned. */ .policy-layout { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--ab-space-6); align-items: start; } #policy-article { height: 420px; overflow: auto; padding: 0 var(--ab-space-4) 0 0; font: var(--ab-text-md) / var(--ab-leading-md) var(--ab-font-sans); } #policy-article h3 { margin: var(--ab-space-6) 0 var(--ab-space-2); font: 600 var(--ab-text-lg) / var(--ab-leading-lg) var(--ab-font-sans); } #policy-article h4 { margin: var(--ab-space-5) 0 var(--ab-space-2); font: 600 var(--ab-text-md) / var(--ab-leading-md) var(--ab-font-sans); } #policy-article > :first-child { margin-top: 0; } #policy-article p { margin: 0 0 var(--ab-space-3); color: var(--ab-muted); } @media (max-width: 760px) { .policy-layout { grid-template-columns: minmax(0, 1fr); gap: var(--ab-space-4); } .policy-layout ab-anchor { order: -1; } } </style> <script type="module"> document.getElementById("policy-anchor").items = [ { href: "#pol-objetivo", title: "Objetivo" }, { href: "#pol-elegiveis", title: "Despesas elegíveis", children: [ { href: "#pol-viagens", title: "Viagens" }, { href: "#pol-refeicoes", title: "Refeições" }, ] }, { href: "#pol-comprovantes", title: "Comprovantes" }, { href: "#pol-prazos", title: "Prazos de reembolso" }, { href: "#pol-excecoes", title: "Exceções" }, ]; </script>

API

Atributos, propriedades, métodos, eventos e slots de cada tag.

<ab-menu>

Navigation menu for sidebars and top bars (antd Menu). Children are ab-menu-item, ab-submenu and ab-menu-group (titled sections). For site/app navigation give items an href and set value to the current page's href (or mark the item current): it gets aria-current="page". size="md" gives dense 32px rows for long navigation lists (e.g. docs sidebars inside ab-app). Follows the WAI-ARIA disclosure navigation pattern: links/buttons in a list, submenus are buttons with aria-expanded; the selected item gets aria-current. Keyboard: Tab between items, ↑ ↓ (← → in horizontal) move, → / ← open and close submenus, Home / End, Esc closes a flyout.

<ab-submenu>

Group of ab-menu-item (and nested ab-submenu) under a title. In vertical menus it expands inline (animated); in horizontal or collapsed menus it opens as a flyout panel.

<ab-anchor>

In-page table of contents (antd Anchor). Links come from items ([{ href: "#id", title, children? }]) or from child <a href="#id"> elements (optional data-level="2" to indent). Highlights the section in view (IntersectionObserver), scrolls smoothly (instant under reduced motion) and moves focus to the target. Make it sticky yourself, e.g. style="position: sticky; top: 72px".