---
title: "Barra de navegação"
type: component
version: "2.2.5"
doc_version: "2.7.22"
status: stable
date: 2026-07-13
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Barra de navegação CSS Tailwind com layouts fixos, responsivos e prontos para menu suspenso. HTML semântico com suporte móvel para navegação acessível e com reconhecimento de tema."
url: https://frutjam.com/pt-br/components/navbar
---

# Componente da barra de navegação

Os componentes da barra de navegação exibem listas de navegação horizontal para estrutura do site e navegação do usuário. Construído com elementos de lista e navegação HTML semântico, o sistema de barra de navegação Frutjam oferece suporte a vários layouts, comportamento responsivo e integração de menus aninhados. Acessíveis e navegáveis ​​pelo teclado, as barras de navegação são ideais para navegação no site principal, localização atual e interfaces de guias.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

| Aula          | Tipo        | Descrição                                                                  |
| ------------- | ----------- | -------------------------------------------------------------------------- |
| navbar        | Base        | Contêiner da barra de navegação horizontal                                 |
| navbar-list   | Modificador | Lista horizontal de links de navegação                                     |
| navbar-start  | Modificador | Espaço esquerdo para logotipo ou primeiro grupo de navegação               |
| navbar-center | Modificador | Slot central para navegação principal                                      |
| navbar-end    | Modificador | Slot certo para ações e controles                                          |
| navbar-top    | Modificador | Posiciona a barra de navegação no topo da janela de visualização           |
| navbar-middle | Modificador | Centralizado verticalmente em um pai                                       |
| navbar-bottom | Modificador | Posiciona a barra de navegação na parte inferior da janela de visualização |

## Barra de navegação

## Posicionamentos da barra de navegação

O componente da barra de navegação é posicionado por padrão no início (à esquerda no LTR). Use `navbar-start`, `navbar-center` ou `navbar-end` para alinhamento horizontal e `navbar-top`, `navbar-middle` ou `navbar-bottom` para alinhamento vertical. O posicionamento é compatível com RTL.

Use classes de posicionamento horizontal para alinhar a lista da barra de navegação ao longo do eixo X e classes de posicionamento vertical quando a barra de navegação tiver uma altura personalizada.

### Posicionamentos horizontais

Controle como a `navbar-list` fica ao longo do eixo X. Eles são compatíveis com RTL (Início/Fim em vez de Esquerda/Direita).

#### Alinhar horizontalmente à esquerda (início)

```html
<nav class="navbar navbar-start">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>
```

#### Alinhar horizontalmente ao centro

```html
<nav class="navbar navbar-center">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>
```

#### Alinhar horizontalmente à direita (final)

```html
<nav class="navbar navbar-end">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>
```

### Posicionamentos verticais

Controle o alinhamento ao longo do eixo Y. Isto é particularmente útil quando a barra de navegação tem uma altura personalizada.

#### Alinhar verticalmente ao topo (início)

```html
<nav class="navbar navbar-top h-56">
  <ul class="navbar-list">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>
```

#### Alinhar verticalmente ao centro

```html
<nav class="navbar navbar-middle h-56">
  <ul class="navbar-list">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>
```

#### Alinhe verticalmente com a parte inferior (extremidade)

```html
<nav class="navbar navbar-bottom h-56">
  <ul class="navbar-list">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>
```