Com Dropdown (usuário)

Link permanente para esta variação, com prévia, código e requisitos completos.

FULL_BLEED · stable

Com Dropdown (usuário)

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

TemaModo

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.