Componente de barra de navegación

Barra de navegación CSS Tailwind solo CSS con marca, enlaces de navegación y espacios de acción. Variantes pegajosas y transparentes. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes de la barra de navegación muestran listas de navegación horizontal para la estructura del sitio y la navegación del usuario. Construido con elementos de lista y navegación HTML semántica, el sistema de barra de navegación Frutjam admite múltiples diseños, comportamiento responsivo e integración de menús anidados. Las barras de navegación, accesibles y navegables con el teclado, son ideales para la navegación del sitio principal, rutas de navegación e interfaces de pestañas.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Barra de navegación

 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>

Ubicaciones de la barra de navegación

El componente de la barra de navegación está colocado de forma predeterminada al inicio (a la izquierda en LTR). Utilice navbar-start, navbar-center o navbar-end para la alineación horizontal, y navbar-top, navbar-middle o navbar-bottom para la alineación vertical. La ubicación es compatible con RTL.

Utilice clases de ubicación horizontal para alinear la lista de la barra de navegación a lo largo del eje X y clases de ubicación vertical cuando la barra de navegación tenga una altura personalizada.

Colocaciones horizontales

Controle cómo se ubica la navbar-list a lo largo del eje X. Estos son compatibles con RTL (Inicio/Fin en lugar de Izquierda/Derecha).

Alinear horizontalmente a la izquierda (inicio)

 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>

Alinear horizontalmente al centro

 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>

Alinear horizontalmente a la derecha (final)

 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>

Colocaciones verticales

Controle la alineación a lo largo del eje Y. Esto es particularmente útil cuando la barra de navegación tiene una altura personalizada.

Alinear verticalmente hacia la parte superior (inicio)

 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>

Alinear verticalmente al centro

 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>

Alinear verticalmente con la parte inferior (final)

 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>