Navbar

Barra de navegação horizontal responsiva que organiza logo, itens e ações. (`mk-navbar`)

O mk-navbar é a barra de navegação principal de uma aplicação. Organiza logotipo, links de navegação e ações em uma faixa horizontal. Em telas menores que 768 px, os itens são ocultados e substituídos por um botão hamburger que abre um painel fullscreen com animação slide-in.

Itens de navegação são compostos com mk-menu-trigger + mk-menu: o trigger renderiza o botão na barra e o mk-menu define o dropdown associado via anchor.

Quando usar

Use quando:

A aplicação tiver múltiplas seções ou rotas acessíveis a partir de um cabeçalho global
For necessário exibir logotipo, itens de navegação e ações (login, avatar) em uma única faixa

Prefira uma alternativa quando:

A navegação for lateral — considere um painel de sidebar
Houver apenas 1 ou 2 destinos — links simples no layout já atendem

Anatomia

#	Parte	Obrigatório?	Função
1	Logo	Sim	Identidade visual da aplicação, envolvida em `mk-navbar-logo`. Ocupa o slot `logo`.
2	Itens de navegação	Sim	Pares de `mk-menu-trigger` + `mk-menu` envolvidos em `mk-navbar-items`. Ocupam o slot `items`.
3	Ações	Não	Botões, avatares ou ícones no slot `actions` via `mk-navbar-actions`.
4	Hamburger (mobile)	Automático	Exibido em telas abaixo de 768 px. Abre o painel fullscreen.

Padrão

import { MkNavbar, MkNavbarLogo, MkNavbarItems, MkMenu, MkMenuItem, MkMenuTrigger } from '@db1/makuco-ui-react';

<MkNavbar>
  <MkNavbarLogo>
    <span style={{ fontWeight: 600 }}>Makuco</span>
  </MkNavbarLogo>
  <MkNavbarItems>
    <MkMenuTrigger id="nav-inicio">Início</MkMenuTrigger>
    <MkMenu anchor="nav-inicio">
      <MkMenuItem value="dashboard" label="Dashboard" icon="layout-dashboard" />
      <MkMenuItem value="feed" label="Feed" icon="rss" />
    </MkMenu>

    <MkMenuTrigger id="nav-produtos">Produtos</MkMenuTrigger>
    <MkMenu anchor="nav-produtos">
      <MkMenuItem value="web" label="Web Components" icon="layers" />
      <MkMenuItem value="react" label="React" icon="atom" />
      <MkMenuItem value="angular" label="Angular" icon="zap" />
    </MkMenu>
  </MkNavbarItems>
</MkNavbar>

<mk-navbar>
  <mk-navbar-logo>
    <span style="font-weight: 600">Makuco</span>
  </mk-navbar-logo>
  <mk-navbar-items>
    <mk-menu-trigger id="nav-inicio">Início</mk-menu-trigger>
    <mk-menu anchor="nav-inicio">
      <mk-menu-item value="dashboard" label="Dashboard" icon="layout-dashboard"></mk-menu-item>
      <mk-menu-item value="feed" label="Feed" icon="rss"></mk-menu-item>
    </mk-menu>

    <mk-menu-trigger id="nav-produtos">Produtos</mk-menu-trigger>
    <mk-menu anchor="nav-produtos">
      <mk-menu-item value="web" label="Web Components" icon="layers"></mk-menu-item>
      <mk-menu-item value="react" label="React" icon="atom"></mk-menu-item>
      <mk-menu-item value="angular" label="Angular" icon="zap"></mk-menu-item>
    </mk-menu>
  </mk-navbar-items>
</mk-navbar>

Transparente

A variante transparent remove fundo e borda — ideal para sobrepor a navbar a banners, imagens de destaque ou seções com cor própria.

<MkNavbar variant="transparent">
  <MkNavbarLogo>
    <span>Makuco</span>
  </MkNavbarLogo>
  <MkNavbarItems>
    <MkMenuTrigger id="nav-inicio">Início</MkMenuTrigger>
    <MkMenu anchor="nav-inicio">
      <MkMenuItem value="dashboard" label="Dashboard" icon="layout-dashboard" />
    </MkMenu>

    <MkMenuTrigger id="nav-sobre">Sobre</MkMenuTrigger>
    <MkMenu anchor="nav-sobre">
      <MkMenuItem value="empresa" label="A empresa" icon="building-2" />
    </MkMenu>
  </MkNavbarItems>
</MkNavbar>

<mk-navbar variant="transparent">
  <mk-navbar-logo>
    <span>Makuco</span>
  </mk-navbar-logo>
  <mk-navbar-items>
    <mk-menu-trigger id="nav-inicio">Início</mk-menu-trigger>
    <mk-menu anchor="nav-inicio">
      <mk-menu-item value="dashboard" label="Dashboard" icon="layout-dashboard"></mk-menu-item>
    </mk-menu>

    <mk-menu-trigger id="nav-sobre">Sobre</mk-menu-trigger>
    <mk-menu anchor="nav-sobre">
      <mk-menu-item value="empresa" label="A empresa" icon="building-2"></mk-menu-item>
    </mk-menu>
  </mk-navbar-items>
</mk-navbar>

Com ações

O mk-navbar-actions recebe qualquer elemento — botões, avatares, ícones. Em mobile, as ações aparecem automaticamente no rodapé do painel hamburger.

import { MkNavbar, MkNavbarLogo, MkNavbarItems, MkNavbarActions, MkMenu, MkMenuItem, MkMenuTrigger, MkIconButton, MkAvatar } from '@db1/makuco-ui-react';

<MkNavbar>
  <MkNavbarLogo>
    <span>Makuco</span>
  </MkNavbarLogo>
  <MkNavbarItems>
    <MkMenuTrigger id="nav-inicio">Início</MkMenuTrigger>
    <MkMenu anchor="nav-inicio">
      <MkMenuItem value="dashboard" label="Dashboard" icon="layout-dashboard" />
    </MkMenu>

    <MkMenuTrigger id="nav-produtos">Produtos</MkMenuTrigger>
    <MkMenu anchor="nav-produtos">
      <MkMenuItem value="web" label="Web Components" icon="layers" />
      <MkMenuItem value="react" label="React" icon="atom" />
    </MkMenu>
  </MkNavbarItems>
  <MkNavbarActions>
    <MkIconButton icon="search" shape="circle" label="Buscar" />
    <MkAvatar label="Ana Souza" editable />
  </MkNavbarActions>
</MkNavbar>

<mk-navbar>
  <mk-navbar-logo>
    <span>Makuco</span>
  </mk-navbar-logo>
  <mk-navbar-items>
    <mk-menu-trigger id="nav-inicio">Início</mk-menu-trigger>
    <mk-menu anchor="nav-inicio">
      <mk-menu-item value="dashboard" label="Dashboard" icon="layout-dashboard"></mk-menu-item>
    </mk-menu>

    <mk-menu-trigger id="nav-produtos">Produtos</mk-menu-trigger>
    <mk-menu anchor="nav-produtos">
      <mk-menu-item value="web" label="Web Components" icon="layers"></mk-menu-item>
      <mk-menu-item value="react" label="React" icon="atom"></mk-menu-item>
    </mk-menu>
  </mk-navbar-items>
  <mk-navbar-actions>
    <mk-icon-button icon="search" shape="circle" label="Buscar"></mk-icon-button>
    <mk-avatar label="Ana Souza" editable></mk-avatar>
  </mk-navbar-actions>
</mk-navbar>

Sticky

Com sticky, a navbar permanece fixada no topo da viewport durante a rolagem da página. Role o painel abaixo para ver o comportamento.

<MkNavbar sticky>
  <MkNavbarLogo>
    <span>Makuco</span>
  </MkNavbarLogo>
  <MkNavbarItems>
    <MkMenuTrigger id="nav-inicio">Início</MkMenuTrigger>
    <MkMenu anchor="nav-inicio">
      <MkMenuItem value="dashboard" label="Dashboard" icon="layout-dashboard" />
    </MkMenu>
  </MkNavbarItems>
</MkNavbar>

<mk-navbar sticky>
  <mk-navbar-logo>
    <span>Makuco</span>
  </mk-navbar-logo>
  <mk-navbar-items>
    <mk-menu-trigger id="nav-inicio">Início</mk-menu-trigger>
    <mk-menu anchor="nav-inicio">
      <mk-menu-item value="dashboard" label="Dashboard" icon="layout-dashboard"></mk-menu-item>
    </mk-menu>
  </mk-navbar-items>
</mk-navbar>

Requisito: sticky aplica position: sticky ao elemento raiz da navbar. Para funcionar, nenhum ancestral entre a navbar e o container de rolagem pode ter overflow diferente de visible, nem transform, filter ou perspective — essas propriedades criam um novo contexto de contenção e cancelam o efeito.

Prop	Tipo	Padrão	Descrição
`variant`	`"default" \\| "transparent"`	`"default"`	`default` adapta-se ao tema do sistema. `transparent` remove fundo e borda.
`sticky`	`boolean`	`false`	Quando `true`, a navbar permanece fixada no topo da viewport ao rolar.

Eventos

Evento	Componente	Payload	Descrição
`mkSelect`	`mk-menu`	`CustomEvent<{ value: string }>`	Emitido ao selecionar um item de submenu. A navbar escuta este evento para fechar o painel mobile automaticamente.

Slots

Componente	Slot	Descrição
`mk-navbar`	`logo`	Logotipo ou identidade visual da aplicação. Preenchido automaticamente por `mk-navbar-logo`.
`mk-navbar`	`items`	Itens de navegação e submenus. Preenchido automaticamente por `mk-navbar-items` — envolva pares de `mk-menu-trigger` + `mk-menu` nesse wrapper.
`mk-navbar`	`actions`	Ações da barra — botões, avatares, ícones. Preenchido automaticamente por `mk-navbar-actions`. Em mobile, aparece no rodapé do painel.
`mk-navbar-logo`	(padrão)	Conteúdo do slot `logo` da navbar (imagem, SVG, texto).
`mk-navbar-items`	(padrão)	Conteúdo do slot `items` da navbar — pares de `mk-menu-trigger` + `mk-menu`.
`mk-navbar-actions`	(padrão)	Conteúdo do slot `actions` da navbar.

Acessibilidade

O mk-navbar renderiza um elemento <nav aria-label="Navegação principal">, identificando o bloco como landmark de navegação para leitores de tela.

Painel mobile: o botão hamburger usa aria-expanded e aria-controls para comunicar o estado do painel. O painel é marcado como role="dialog" aria-modal="true" e recebe foco automaticamente ao abrir. Pressionar Escape fecha o painel e devolve o foco ao botão que o abriu.

Itens e submenus: acessibilidade gerenciada pelos próprios mk-menu-trigger e mk-menu.

Tecla	Comportamento
`Tab`	Move o foco entre os triggers da navbar e o botão hamburger.
`Enter` / `Space`	Abre o submenu do trigger focado.
`Escape`	Fecha o painel mobile e devolve o foco ao botão hamburger.