Componentes · Navegación

Navbar (navegación principal)

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.

Código + resultado

Ejemplo aplicado de Navbar

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

<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>

Componente real

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

Etiqueta nav

Añade aria-label cuando existan varias navegaciones.

Página activa

Usa aria-current para comunicar la ubicación actual.

Pocos destinos

Deja los accesos secundarios para menús internos.

Móvil primero

Comprueba orden, salto de línea y área táctil.