Pular para o conteúdo
Smart UIVATSE interface system
VATSE.DEV
← Catálogonavigation · stable

Navegação

Navegação de produto e menu mobile controlado por teclado. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Navegação quando a interface precisar de navegação de produto e menu mobile controlado por teclado.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias
FULL_BLEED · stable

Mobile Collapsible

Mobile Collapsible, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<nav class="sc-nav sc-nav--demo is-collapsible" style="position: relative; top: 0;">
                    <a class="sc-nav-logo" href="#doc-nav">Smart UI</a>
                    <button class="sc-nav-toggle" type="button" aria-label="Abrir menu">Menu</button>
                    <ul class="sc-nav-links">
                      <li><a class="sc-nav-link" href="#doc-modal">Modal</a></li>
                      <li><a class="sc-nav-link" href="#doc-dropdown">Dropdown</a></li>
                      <li><a class="sc-nav-link" href="#doc-tabs">Tabs</a></li>
                    </ul>
                    <div class="sc-nav-auth">
                      <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button" aria-label="Alternar modo" data-mode-toggle="">
                        <span class="sc-mode-ico" aria-hidden="true">
                          <i class="sc-icon ico-moon" data-smart-icon="moon"></i>
                          <i class="sc-icon ico-sun" data-smart-icon="sun"></i>
                        </span>
                      </button>
                      <button class="sc-btn sc-btn-primary" type="button">Criar conta</button>
                    </div>
                  </nav>
Classes, JavaScript e API
sc-navsc-nav--demosc-nav-logosc-nav-togglesc-nav-linkssc-nav-linksc-nav-authsc-btnsc-btn-ghostsc-btn-iconsc-mode-icosc-iconsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

FULL_BLEED · stable

Centered / Minimal

Centered / Minimal, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<nav class="sc-nav sc-nav--demo sc-nav--center" style="position: relative; top: 0;">
                    <a class="sc-nav-logo" href="#doc-nav">Smart UI</a>
                    <ul class="sc-nav-links">
                      <li><a class="sc-nav-link" href="#doc-start">Começar</a></li>
                      <li><a class="sc-nav-link" href="#doc-theme">Theming</a></li>
                      <li><a class="sc-nav-link" href="#doc-tokens">Tokens</a></li>
                    </ul>
                  </nav>
Classes, JavaScript e API
sc-navsc-nav--demosc-nav--centersc-nav-logosc-nav-linkssc-nav-link

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

FULL_BLEED · stable

Com Dropdown (usuário)

Com Dropdown (usuário), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<nav class="sc-nav sc-nav--demo" style="position: relative; top: 0;">
                    <a class="sc-nav-logo" href="#doc-nav">Smart UI</a>
                    <ul class="sc-nav-links">
                      <li><a class="sc-nav-link" href="#doc-accordion">FAQ</a></li>
                      <li><a class="sc-nav-link" href="#doc-gallery">Galeria</a></li>
                      <li><a class="sc-nav-link" href="#doc-carousel">Carousel</a></li>
                    </ul>
                    <div class="sc-nav-auth">
                      <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button" aria-label="Alternar modo" data-mode-toggle="">
                        <span class="sc-mode-ico" aria-hidden="true">
                          <i class="sc-icon ico-moon" data-smart-icon="moon"></i>
                          <i class="sc-icon ico-sun" data-smart-icon="sun"></i>
                        </span>
                      </button>
                      <div class="sc-menu">
                        <button class="sc-btn sc-btn-glass" type="button" data-menu-trigger="">Conta</button>
                        <div class="sc-menu-popover">
                          <button class="sc-menu-item" type="button">Perfil</button>
                          <button class="sc-menu-item" type="button">Assinatura</button>
                          <div class="sc-menu-sep"></div>
                          <button class="sc-menu-item" type="button">Sair</button>
                        </div>
                      </div>
                      <button class="sc-btn sc-btn-primary" type="button">Publicar</button>
                    </div>
                  </nav>
Classes, JavaScript e API
sc-navsc-nav--demosc-nav-logosc-nav-linkssc-nav-linksc-nav-authsc-btnsc-btn-ghostsc-btn-iconsc-mode-icosc-iconsc-menusc-btn-glasssc-menu-popoversc-menu-itemsc-menu-sepsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

FULL_BLEED · stable

Pill / Compact (tipo “doc pill”)

Pill / Compact (tipo “doc pill”), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<nav class="sc-nav sc-nav--demo sc-nav--pill sc-nav--compact" style="position: relative; top: 0;">
                    <a class="sc-nav-logo" href="#doc-nav">Smart UI</a>
                    <ul class="sc-nav-links">
                      <li><a class="sc-nav-link" href="#doc-toast">Toast</a></li>
                      <li><a class="sc-nav-link" href="#doc-tooltip">Tooltip</a></li>
                      <li><a class="sc-nav-link" href="#doc-modal">Modal</a></li>
                    </ul>
                    <div class="sc-nav-auth">
                      <button class="sc-btn sc-btn-ghost sc-btn-icon sc-btn-sm" type="button" aria-label="Alternar modo" data-mode-toggle="">
                        <span class="sc-mode-ico" aria-hidden="true">
                          <i class="sc-icon ico-moon" data-smart-icon="moon"></i>
                          <i class="sc-icon ico-sun" data-smart-icon="sun"></i>
                        </span>
                      </button>
                      <button class="sc-btn sc-btn-primary sc-btn-sm" type="button">CTA</button>
                    </div>
                  </nav>
Classes, JavaScript e API
sc-navsc-nav--demosc-nav--pillsc-nav--compactsc-nav-logosc-nav-linkssc-nav-linksc-nav-authsc-btnsc-btn-ghostsc-btn-iconsc-btn-smsc-mode-icosc-iconsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

FULL_BLEED · stable

App bar (ícones + modo)

App bar (ícones + modo), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<nav class="sc-nav sc-nav--demo" style="position: relative; top: 0;">
                    <a class="sc-nav-logo" href="#doc-nav"><i class="sc-icon" data-smart-icon="layout"></i> Smart UI</a>
                    <ul class="sc-nav-links">
                      <li><a class="sc-nav-link" href="#doc-start"><i class="sc-icon" data-smart-icon="home"></i> Início</a></li>
                      <li><a class="sc-nav-link" href="#doc-grid"><i class="sc-icon" data-smart-icon="grid"></i> Layout</a></li>
                      <li><a class="sc-nav-link" href="#doc-cards"><i class="sc-icon" data-smart-icon="layout"></i> UI</a></li>
                    </ul>
                    <div class="sc-nav-auth">
                      <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button" aria-label="Notificações">
                        <i class="sc-icon" data-smart-icon="bell"></i>
                      </button>
                      <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button" aria-label="Configurações">
                        <i class="sc-icon" data-smart-icon="settings"></i>
                      </button>
                      <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button" aria-label="Alternar modo" data-mode-toggle="">
                        <span class="sc-mode-ico" aria-hidden="true">
                          <i class="sc-icon ico-moon" data-smart-icon="moon"></i>
                          <i class="sc-icon ico-sun" data-smart-icon="sun"></i>
                        </span>
                      </button>
                    </div>
                  </nav>
Classes, JavaScript e API
sc-navsc-nav--demosc-nav-logosc-iconsc-nav-linkssc-nav-linksc-nav-authsc-btnsc-btn-ghostsc-btn-iconsc-mode-ico

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

FULL_BLEED · stable

Nav “SaaS” (badge + modo)

Nav “SaaS” (badge + modo), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<nav class="sc-nav sc-nav--demo" style="position: relative; top: 0;">
                    <a class="sc-nav-logo" href="#doc-nav">Smart UI <span class="sc-badge sc-badge-info" style="margin-left:10px;">BETA</span></a>
                    <ul class="sc-nav-links">
                      <li><a class="sc-nav-link" href="#doc-theme">Temas</a></li>
                      <li><a class="sc-nav-link" href="#doc-icons">Ícones</a></li>
                      <li><a class="sc-nav-link" href="#doc-forms">Forms</a></li>
                    </ul>
                    <div class="sc-nav-auth">
                      <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button" aria-label="Alternar modo" data-mode-toggle="">
                        <span class="sc-mode-ico" aria-hidden="true">
                          <i class="sc-icon ico-moon" data-smart-icon="moon"></i>
                          <i class="sc-icon ico-sun" data-smart-icon="sun"></i>
                        </span>
                      </button>
                      <button class="sc-btn sc-btn-outline" type="button">Pricing</button>
                      <button class="sc-btn sc-btn-primary" type="button">Começar</button>
                    </div>
                  </nav>
Classes, JavaScript e API
sc-navsc-nav--demosc-nav-logosc-badgesc-badge-infosc-nav-linkssc-nav-linksc-nav-authsc-btnsc-btn-ghostsc-btn-iconsc-mode-icosc-iconsc-btn-outlinesc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

FULL_BLEED · stable

Nav com submenu (menu + modo)

Nav com submenu (menu + modo), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<nav class="sc-nav sc-nav--demo sc-nav--submenu" style="position: relative; top: 0;">
                    <a class="sc-nav-logo" href="#doc-nav">Smart UI</a>
                    <details class="sc-nav-disclosure">
                      <summary>Recursos <span aria-hidden="true">⌄</span></summary>
                      <section aria-label="Recursos Smart UI">
                        <header><small>EXPLORAR</small><strong>Construa por composição</strong></header>
                        <a href="#doc-hero"><b>Marketing</b><span>Hero, CTA e prova social</span></a>
                        <a href="#doc-cards"><b>Produto</b><span>Cards, tabelas e estados</span></a>
                        <a href="#doc-icons"><b>Fundação</b><span>Tokens, ícones e temas</span></a>
                        <footer><a href="#doc-start">Ver documentação completa →</a></footer>
                      </section>
                    </details>
                    <div class="sc-nav-auth">
                      <a class="sc-nav-link" href="#doc-buttons">Componentes</a>
                      <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button" aria-label="Alternar modo" data-mode-toggle="">
                        <span class="sc-mode-ico" aria-hidden="true">
                          <i class="sc-icon ico-moon" data-smart-icon="moon"></i>
                          <i class="sc-icon ico-sun" data-smart-icon="sun"></i>
                        </span>
                      </button>
                      <a class="sc-btn sc-btn-primary" href="#doc-install">Baixar</a>
                    </div>
                  </nav>
Classes, JavaScript e API
sc-navsc-nav--demosc-nav--submenusc-nav-logosc-nav-disclosuresc-nav-authsc-nav-linksc-btnsc-btn-ghostsc-btn-iconsc-mode-icosc-iconsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

FULL_BLEED · stable

Mobile + search + modo (tudo junto)

Mobile + search + modo (tudo junto), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<nav class="sc-nav sc-nav--demo is-collapsible" style="position: relative; top: 0;">
                    <a class="sc-nav-logo" href="#doc-nav">Smart UI</a>
                    <button class="sc-nav-toggle" type="button" aria-label="Abrir menu">Menu</button>
                    <ul class="sc-nav-links">
                      <li><a class="sc-nav-link" href="#doc-start">Começar</a></li>
                      <li><a class="sc-nav-link" href="#doc-theme">Temas</a></li>
                      <li><a class="sc-nav-link" href="#templates">Templates</a></li>
                    </ul>
                    <div class="sc-nav-auth">
                      <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button" aria-label="Alternar modo" data-mode-toggle="">
                        <span class="sc-mode-ico" aria-hidden="true">
                          <i class="sc-icon ico-moon" data-smart-icon="moon"></i>
                          <i class="sc-icon ico-sun" data-smart-icon="sun"></i>
                        </span>
                      </button>
                      <button class="sc-btn sc-btn-outline sc-btn-sm" type="button" aria-label="Pesquisar"><i class="sc-icon" data-smart-icon="search"></i></button>
                      <button class="sc-btn sc-btn-primary sc-btn-sm" type="button">Entrar</button>
                    </div>
                  </nav>
Classes, JavaScript e API
sc-navsc-nav--demosc-nav-logosc-nav-togglesc-nav-linkssc-nav-linksc-nav-authsc-btnsc-btn-ghostsc-btn-iconsc-mode-icosc-iconsc-btn-outlinesc-btn-smsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

FULL_BLEED · stable

Command center

Command center, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<nav class="sc-nav sc-nav-command"><a class="sc-app-brand" href="/components/nav/"><strong>NORTH</strong><small>WORKSPACE</small></a><button class="sc-command-trigger" type="button"><kbd>⌘</kbd><span>Buscar ou executar</span><kbd>K</kbd></button><span class="sc-status"><i></i> Online</span><button class="sc-avatar" type="button" aria-label="Abrir perfil">MC</button></nav>
Classes, JavaScript e API
sc-navsc-nav-commandsc-app-brandsc-command-triggersc-statussc-avatar

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

FULL_BLEED · stable

Brand split

Brand split, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<nav class="sc-nav sc-nav-brand-split"><div><a href="/components/">Produto</a><a href="/templates/">Soluções</a></div><a class="sc-app-brand" href="/components/nav/">ORBIT</a><div><a href="/docs/">Docs</a><a class="sc-btn sc-btn-primary" href="/examples/">Começar</a></div></nav>
Classes, JavaScript e API
sc-navsc-nav-brand-splitsc-app-brandsc-btnsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

VIEWPORT · stable

Context rail

Context rail, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<aside class="sc-nav-context"><header><a class="sc-app-brand" href="/">N</a><button type="button" aria-label="Recolher navegação">←</button></header><nav aria-label="Workspace"><a class="is-active" href="/examples/"><i>01</i><span>Visão geral</span></a><a href="/templates/"><i>02</i><span>Projetos</span></a><a href="/components/"><i>03</i><span>Biblioteca</span></a></nav><footer><span class="sc-avatar">AC</span><small>Acme Studio</small></footer></aside>
Classes, JavaScript e API
sc-nav-contextsc-app-brandsc-avatar

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

FULL_BLEED · stable

Product switcher

Product switcher, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<header class="sc-nav sc-nav-product-switcher"><details><summary><span class="sc-app-brand">NORTH</span><small>Produtos</small></summary><div><a href="/templates/dashboard/"><b>North Ops</b><span>Operação</span></a><a href="/templates/crm/"><b>Pulse CRM</b><span>Relacionamento</span></a><a href="/templates/analytics/"><b>Vector Data</b><span>Analytics</span></a></div></details><nav><a href="/docs/">Documentação</a><a href="/examples/">Exemplos</a></nav><a class="sc-btn sc-btn-outline" href="/components/">Abrir console</a></header>
Classes, JavaScript e API
sc-navsc-nav-product-switchersc-app-brandsc-btnsc-btn-outline

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

MOBILE · stable

Mobile dock

Mobile dock, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<nav class="sc-mobile-dock" aria-label="Navegação de aplicativo"><a class="is-active" href="/examples/"><i>⌂</i><span>Início</span></a><a href="/components/"><i>◇</i><span>Explorar</span></a><a class="is-create" href="/playground/"><i>+</i><span>Criar</span></a><a href="/templates/"><i>▦</i><span>Projetos</span></a><a href="/docs/"><i>○</i><span>Perfil</span></a></nav>
Classes, JavaScript e API
sc-mobile-dock

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Componentes relacionados

Rodapés →Mega menu →Tabs →Breadcrumbs →