Navbar

Barra de navegação principal com background escuro fixo. Duas variantes: Default (sistema) e News (portal de notícias). Botões condicionais de inserir, download e impressão. Dropdown de ajuda com overlay escuro.

components/navbar.cssAbrir no Figma

Variantes

Passe o mouse sobre o botão de ajuda (?) para ver o dropdown.

Carregando exemplo...

Propriedades

Classes disponíveis para configurar a navbar.

Propriedade	Tipo	Default	Descrição
`.navbar`	`classe`	—	Container principal (96px, padding 72px, bg on-black).
`.navbar--news`	`classe`	—	Variante portal de notícias (simplificada).
`.navbar-left`	`classe`	—	Seção esquerda (menu + logo, gap 40px).
`.navbar-menu-btn`	`classe`	—	Botão hamburger (40x40, accent-300).
`.navbar-logo`	`classe`	—	Logo do sistema.
`.navbar-right`	`classe`	—	Seção direita (ações, gap 20px).
`.navbar-icon-btn`	`classe`	—	Botão icon-only (40x40, borda on-black).
`.navbar-insert-btn`	`classe`	—	Botão inserir (filled accent, ícone + texto).
`.navbar-avatar`	`classe`	—	Avatar do usuário (40x40 circle).
`.navbar-help-wrapper`	`classe`	—	Wrapper do botão ajuda + dropdown.
`.navbar-help-dropdown`	`classe`	—	Dropdown de ajuda (overlay on-black).
`.navbar-help-item`	`classe`	—	Item do dropdown (48px, ícone + texto).

Código

Snippets prontos para copiar e usar.

Padrão

html

<nav class="navbar">
    <div class="navbar-left">
        <button class="navbar-menu-btn"><!-- SVG hamburger --></button>
        <div class="navbar-logo"><!-- Logo SVG --></div>
    </div>
    <div class="navbar-right">
        <button class="navbar-icon-btn" title="Notificações"><!-- SVG --></button>
        <div class="navbar-help-wrapper">
            <button class="navbar-icon-btn" title="Ajuda"><!-- SVG --></button>
            <div class="navbar-help-dropdown">
                <button class="navbar-help-item"><!-- SVG --> Item</button>
            </div>
        </div>
        <img class="navbar-avatar" src="foto.jpg" alt="Perfil">
    </div>
</nav>

Com botão inserir (rotinas)

html

<div class="navbar-right">
    <button class="navbar-insert-btn">
        <svg><!-- plus icon --></svg>
        Inserir
    </button>
    <!-- demais botões -->
</div>

Tokens utilizados

Variáveis semânticas aplicadas ao componente.

Token	Uso
`--surface-base-neutral-container-default-on-black`	Background da navbar
`--surface-base-neutral-container-hover-on-black`	Hover dos botões
`--surface-overlay-neutral-container-default-on-black`	Background dropdown ajuda
`--surface-overlay-neutral-container-hover-on-black`	Hover dropdown item
`--border-base-neutral-on-black`	Borda dos botões icon-only
`--border-overlay-neutral-on-black`	Borda do dropdown
`--icon-base-neutral-white`	Cor dos ícones
`--text-base-neutral-white`	Cor do texto
`--accent-300`	Menu button / botão inserir
`--radius-default`	Border-radius (6px)

Navbar ​

Variantes ​

Propriedades ​

Código ​

Padrão ​