Navbar | DS CANTA.

Navbar Basica

<nav class="canta-navbar">
  <a href="#" class="canta-navbar__brand">
    <span class="canta-navbar__brand-text">CANTA.</span>
  </a>
  <div class="canta-navbar__nav">
    <ul class="canta-navbar__menu">
      <li class="canta-navbar__item">
        <a href="#" class="canta-navbar__link canta-navbar__link--active">Home</a>
      </li>
      <li class="canta-navbar__item">
        <a href="#" class="canta-navbar__link">Sobre</a>
      </li>
      <li class="canta-navbar__item">
        <a href="#" class="canta-navbar__link">Contato</a>
      </li>
    </ul>
  </div>
  <div class="canta-navbar__actions">
    <button class="canta-btn canta-btn--primary canta-btn--sm">Entrar</button>
  </div>
</nav>

Com Logo e Dropdown

<nav class="canta-navbar">
  <a href="#" class="canta-navbar__brand">
    <div class="canta-navbar__logo">
      <img src="logo.svg" alt="Logo">
    </div>
    <span class="canta-navbar__brand-text">CANTA.</span>
  </a>
  <div class="canta-navbar__nav">
    <ul class="canta-navbar__menu">
      <li class="canta-navbar__item">
        <a href="#" class="canta-navbar__link canta-navbar__link--active">Dashboard</a>
      </li>
      <li class="canta-navbar__item canta-navbar__dropdown">
        <button class="canta-navbar__dropdown-trigger">
          Produtos <span class="canta-navbar__dropdown-icon"></span>
        </button>
        <ul class="canta-navbar__dropdown-menu">
          <li class="canta-navbar__dropdown-item">
            <a href="#" class="canta-navbar__dropdown-link">Categoria A</a>
          </li>
          <li class="canta-navbar__dropdown-item">
            <a href="#" class="canta-navbar__dropdown-link">Categoria B</a>
          </li>
          <li class="canta-navbar__dropdown-divider"></li>
          <li class="canta-navbar__dropdown-item">
            <a href="#" class="canta-navbar__dropdown-link">Ver Todos</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="canta-navbar__actions">
    <button class="canta-btn canta-btn--primary canta-btn--sm">Minha Conta</button>
  </div>
</nav>

Variante Dark

<nav class="canta-navbar canta-navbar--dark">
  <!-- ... conteudo da navbar ... -->
</nav>

Acentos de Cor

Sticky / Fixed

<!-- Sticky: gruda no topo ao rolar -->
<nav class="canta-navbar canta-navbar--sticky">...</nav>

<!-- Fixed: posicao fixa no topo -->
<nav class="canta-navbar canta-navbar--fixed">...</nav>

<!-- Bordered: adiciona sombra brutalista -->
<nav class="canta-navbar canta-navbar--bordered">...</nav>

<!-- Transparent: fundo transparente -->
<nav class="canta-navbar canta-navbar--transparent">...</nav>

Tamanhos

<nav class="canta-navbar canta-navbar--sm">...</nav>
<nav class="canta-navbar canta-navbar--lg">...</nav>

Menu Mobile

Em telas menores (mobile/tablet), a navegacao e acoes ficam ocultas e o botao hamburger (.canta-navbar__toggle) aparece. O menu lateral (.canta-navbar-mobile) desliza pela direita.

<!-- Toggle hamburger (aparece em mobile/tablet) -->
<nav class="canta-navbar">
  <a href="#" class="canta-navbar__brand">...</a>
  <div class="canta-navbar__nav">...</div>
  <button class="canta-navbar__toggle" onclick="openMobileMenu()">
    <span class="canta-navbar__toggle-icon"></span>
  </button>
</nav>

<!-- Backdrop -->
<div class="canta-navbar-backdrop" id="navbar-backdrop"></div>

<!-- Menu mobile (desliza pela direita) -->
<div class="canta-navbar-mobile" id="navbar-mobile">
  <div class="canta-navbar-mobile__header">
    <span>Menu</span>
    <button class="canta-navbar-mobile__close" onclick="closeMobileMenu()">
      <span class="canta-navbar-mobile__close-icon"></span>
    </button>
  </div>
  <ul class="canta-navbar-mobile__menu">
    <li class="canta-navbar-mobile__item">
      <a href="#" class="canta-navbar-mobile__link canta-navbar-mobile__link--active">Home</a>
    </li>
    <li class="canta-navbar-mobile__item">
      <a href="#" class="canta-navbar-mobile__link">Sobre</a>
    </li>
  </ul>
  <div class="canta-navbar-mobile__actions">
    <button class="canta-btn canta-btn--primary canta-btn--full-width">Entrar</button>
  </div>
</div>

API

Classe	Descricao
`.canta-navbar`	Container principal da navbar (obrigatorio)
`.canta-navbar__brand`	Area da marca/logo (link)
`.canta-navbar__logo`	Container do logotipo (img ou svg)
`.canta-navbar__brand-text`	Texto da marca (Montserrat extrabold uppercase)
`.canta-navbar__nav`	Container da navegacao central
`.canta-navbar__menu`	Lista de itens de menu (ul)
`.canta-navbar__item`	Item individual do menu (li)
`.canta-navbar__link`	Link de navegacao
`.canta-navbar__link--active`	Estado ativo do link (fundo preto, texto branco)
`.canta-navbar__link-icon`	Icone dentro do link
`.canta-navbar__dropdown`	Container de dropdown (dentro de __item)
`.canta-navbar__dropdown-trigger`	Botao que abre o dropdown
`.canta-navbar__dropdown-icon`	Seta indicadora do dropdown
`.canta-navbar__dropdown-menu`	Menu suspenso do dropdown
`.canta-navbar__dropdown-item`	Item do menu dropdown
`.canta-navbar__dropdown-link`	Link dentro do dropdown
`.canta-navbar__dropdown-link--active`	Link ativo do dropdown
`.canta-navbar__dropdown-divider`	Divisor horizontal no dropdown
`.canta-navbar__dropdown--open`	Forca dropdown aberto (via JS)
`.canta-navbar__actions`	Area de acoes (lado direito)
`.canta-navbar__toggle`	Botao hamburger (visivel em mobile)
`.canta-navbar__toggle-icon`	Icone hamburger com animacao
`.canta-navbar__toggle--open`	Estado aberto do hamburger (X)
`.canta-navbar--dark`	Variante com fundo preto
`.canta-navbar--blue`	Acento azul nos links ativos
`.canta-navbar--magenta`	Acento magenta nos links ativos
`.canta-navbar--bordered`	Adiciona sombra brutalista
`.canta-navbar--sticky`	Posicao sticky no topo
`.canta-navbar--fixed`	Posicao fixa no topo
`.canta-navbar--transparent`	Fundo transparente
`.canta-navbar--sm`	Tamanho compacto
`.canta-navbar--lg`	Tamanho grande
`.canta-navbar-mobile`	Menu mobile (slide-in pela direita)
`.canta-navbar-mobile--open`	Menu mobile aberto
`.canta-navbar-backdrop`	Overlay escuro atras do menu mobile
`.canta-navbar-backdrop--open`	Backdrop visivel