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.
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
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.