Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente da barra de navegação

Última atualização:

Barra de navegação Tailwind CSS somente CSS com marca, links de navegação e slots de ação. Variantes pegajosas e transparentes. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

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
navbarBaseContêiner da barra de navegação horizontal
navbar-listModificadorLista horizontal de links de navegação
navbar-startModificadorEspaço esquerdo para logotipo ou primeiro grupo de navegação
navbar-centerModificadorSlot central para navegação principal
navbar-endModificadorSlot certo para ações e controles
navbar-topModificadorPosiciona a barra de navegação no topo da janela de visualização
navbar-middleModificadorCentralizado verticalmente em um pai
navbar-bottomModificadorPosiciona a barra de navegação na parte inferior da janela de visualização

Barra de navegação

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar">
  <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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav className="navbar">
  <ul className="navbar-list gap-x-6">
    <li>
      <a className="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a className="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a className="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<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>

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Barra de navegação e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP