# Navbar (navegación principal)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/component-navbar.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Componentes · Navegación

Organiza identidad, enlaces y acciones principales en una barra adaptable y semántica.

v2.0

⌂
## Marca visible
Separa identidad y navegación sin romper la composición.

↔
## Layout flexible
Distribuye marca, enlaces y acciones mediante flex.

⌘
## Semántica nativa
Parte de nav, listas y enlaces reconocibles por tecnologías de asistencia.

i
## Breakpoint seleccionable
Sigue el patrón `componente-{breakpoint}-comportamiento`: `.q-navbar-640-collapse`, `.q-navbar-768-collapse`, `.q-navbar-1024-collapse`, `.q-navbar-1280-collapse` o `.q-navbar-1536-collapse`. Para un ancho propio usa `data-qy-navbar-breakpoint`.

Código + resultado

## Ejemplo aplicado de Navbar
El código mostrado corresponde exactamente al componente renderizado en el panel de resultado.

HTML

```html
<nav class="q-navbar rounded-12 q-navbar-640-collapse" aria-label="Ejemplo principal" data-qy-navbar>
  <a class="q-navbar__brand" href="#" aria-label="Quickly V2">
    <img class="q-navbar__brand-logo" src="../assets/img/ico.png" alt="">
  </a>
  <button class="q-navbar__collapse-toggle rounded-8" type="button" aria-expanded="false" aria-controls="navbar-example-menu" data-qy-navbar-toggle>
    Menú
  </button>
  <ul class="q-navbar__nav" id="navbar-example-menu" data-qy-navbar-menu>
    <li class="q-navbar__item">
      <a class="q-navbar__link rounded-8" aria-current="page" href="#">
        Inicio
      </a>
    </li>
    <li class="q-navbar__item">
      <details class="q-navbar__dropdown">
        <summary class="q-navbar__link rounded-8 q-navbar__toggle">
          Sistema
        </summary>
        <ul class="q-navbar__submenu rounded-12 shadow-box-s shadow-none-640">
          <li class="q-navbar__submenu-item">
            <details class="q-navbar__submenu-dropdown">
              <summary class="q-navbar__sublink rounded-8 q-navbar__subtoggle" aria-label="Fundamentos">
                Fundamentos
              </summary>
              <ul class="q-navbar__submenu rounded-12 q-navbar__submenu--nested shadow-box-s shadow-none-640">
                <li>
                  <a class="q-navbar__sublink rounded-8" aria-label="Contenedores" href="#">
                    Contenedores
                  </a>
                </li>
                <li>
                  <a class="q-navbar__sublink rounded-8" aria-label="Grid" href="#">
                    Grid
                  </a>
                </li>
                <li>
                  <a class="q-navbar__sublink rounded-8" aria-label="Tipografía" href="#">
                    Tipografía
                  </a>
                </li>
              </ul>
            </details>
          </li>
          <li class="q-navbar__submenu-item">
            <a class="q-navbar__sublink rounded-8" aria-label="Utilidades" href="#">
              Utilidades
            </a>
          </li>
          <li class="q-navbar__submenu-item">
            <a class="q-navbar__sublink rounded-8" aria-label="Componentes" href="#">
              Componentes
            </a>
          </li>
        </ul>
      </details>
    </li>
    <li class="q-navbar__item">
      <a class="q-navbar__link rounded-8" href="#">
        Documentación
      </a>
    </li>
  </ul>
</nav>
```

Resultado aplicado   Navbar · estructura principal

Componente real

- Inicio
- Sistema Fundamentos Contenedores
- Grid
- Tipografía

- Utilidades
- Componentes

- Documentación

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

Referencia

## Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.

| Clase o atributo | Función | Uso recomendado |
| --- | --- | --- |
| .q-navbar | Contenedor | Barra principal. |
| .q-navbar__brand | Marca | Identidad o enlace de inicio. |
| .q-navbar__brand-logo | Logotipo | Favicon corporativo dentro del enlace de marca. |
| .q-navbar-640-collapse | Breakpoint 640 | Colapsa la navegación hasta 640px. |
| .q-navbar-768-collapse | Breakpoint 768 | Colapsa la navegación hasta 768px. |
| .q-navbar-1024-collapse | Breakpoint 1024 | Colapsa la navegación hasta 1024px. |
| .q-navbar-1280-collapse | Breakpoint 1280 | Colapsa la navegación hasta 1280px. |
| .q-navbar-1536-collapse | Breakpoint 1536 | Colapsa la navegación hasta 1536px. |
| data-qy-navbar-breakpoint | Breakpoint personalizado | Acepta un ancho numérico en píxeles. |
| .q-navbar__collapse-toggle | Control móvil | Abre o colapsa la navegación en pantallas pequeñas. |
| .q-navbar__nav | Lista | Agrupa enlaces y acciones. |
| .q-navbar__item | Elemento | Contiene un destino o un menú de segundo nivel. |
| .q-navbar__link | Enlace | Destino individual. |
| .q-navbar__dropdown | Nivel desplegable | Control nativo que contiene el submenú. |
| .q-navbar__toggle | Activador | Muestra el indicador y controla el segundo nivel. |
| .q-navbar__submenu | Submenú | Agrupa los destinos del segundo nivel. |
| .q-navbar__submenu-item | Elemento secundario | Contiene un destino o un tercer nivel. |
| .q-navbar__sublink | Enlace secundario | Destino dentro del submenú. |
| .q-navbar__submenu-dropdown | Tercer nivel | Control nativo que contiene el nivel anidado. |
| .q-navbar__subtoggle | Activador anidado | Controla el tercer nivel y muestra su indicador. |
| .q-navbar__submenu--nested | Submenú anidado | Agrupa los destinos del tercer nivel. |
| .shadow-box-s | Sombra opcional | Eleva los submenús sobre el contenido. |
| .shadow-none-640 | Reset responsive | Retira la sombra cuando el menú se integra al flujo móvil. |
| [open] | Estado abierto | Expone el segundo nivel y rota el indicador. |
| .is-open | Estado móvil | Expone la navegación principal en pantallas pequeñas. |
| data-qy-navbar | Hook JS | Inicializa el comportamiento responsive. |
| data-qy-navbar-toggle | Hook JS | Conecta el control de apertura. |
| data-qy-navbar-menu | Hook JS | Identifica la lista colapsable. |
| [aria-current="page"] | Estado | Marca la página activa. |
| .bc-{token} | Color de acento | Personaliza enlaces activos y estados interactivos. |
| .rounded-12 | Radio de superficies | Redondea la barra y los paneles de submenú. |
| .rounded-8 | Radio interactivo | Redondea enlaces y control de colapso. |

Recomendaciones

## Buenas prácticas de Navbar

01
### Etiqueta nav
Añade aria-label cuando existan varias navegaciones.

02
### Página activa
Usa aria-current para comunicar la ubicación actual.

03
### Pocos destinos
Deja los accesos secundarios para menús internos.

04
### Móvil primero
Comprueba orden, salto de línea y área táctil.