Cabecera de app

Código

Copiar el marcado

import "@luz-ds/catalog/components/app-bar.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/app-bar.min.css" integrity="sha384-coazETaShJ8FGQ4mRfMwvCnFxdigv1KQ6ShOIpp7Uu6aaRTzQcuPJJdYCKDLwiLM" crossorigin="anonymous">

La barra, dentro de .o-main junto a la barra lateral, con la búsqueda del catálogo antes de la cuenta:

<div class="o-shell">
  <nav class="luz-sidebar" id="app-nav" aria-label="Main" popover>…</nav>
  <div class="o-main">
    <header class="luz-app-bar o-sticky">
      <div class="o-row">
        <button class="luz-nav-toggle" type="button" popovertarget="app-nav" aria-label="Menu">
          <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16"/></g></svg>
        </button>
        <p class="luz-app-bar__product">Bodega</p>
        <div class="o-row luz-app-bar__actions">
          <luz-search>…</luz-search>
          <div class="luz-dropdown">
            <button class="luz-btn luz-btn--ghost luz-app-bar__account" type="button" popovertarget="account-menu"><span class="luz-avatar luz-avatar--sm">AM</span> <span class="luz-app-bar__account-name">Ana Martín</span></button>
            <div class="luz-dropdown__menu" id="account-menu" popover>
              <ul class="luz-dropdown__list">
                <li><a class="luz-dropdown__item" href="/account/">Account settings</a></li>
                <li><a class="luz-dropdown__item" href="/logout/">Sign out</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </header>
    <main class="luz-dashboard" id="main-content" tabindex="-1">…</main>
  </div>
</div>

Variantes y opciones

Sin modificadores. La cabecera es una clase de app aplicada a un <header> nativo, maquetada con los objetos de core en el marcado.

Cómo funciona

CSS de components/app-bar.css de @luz-ds/catalog aplicado a la estructura, la barra fija, el panel y el desplegable de core. Sin JavaScript.

• App solo aporta la apariencia: la superficie de la página, la línea inferior y los espacios de la fila (8 px entre filas, 16 px entre elementos). Core se ocupa del resto: .o-sticky aporta la fijación y el relleno de desplazamiento, .o-row la fila, el control de navegación y la barra lateral el panel, y el desplegable la lista de cuenta.
• Una barra de una fila tiene la altura --luz-bar-h de core: controles de 44 px, 4 px arriba y abajo y una línea de 1 px. Al ampliar el texto, la fila se parte y la barra crece.
• Se desplaza la página, no .o-main, así que la barra fija permanece en la parte superior de la ventana. Si asignas una altura propia a .o-main y haces que se desplace, su relleno de desplazamiento evita que los elementos enfocados queden bajo la barra.
• La lista de cuenta se abre debajo del botón y termina donde este termina, así que nunca se sale de la ventana por el extremo en línea de la barra.
• Sin el catálogo no hay búsqueda: omite <luz-search>. No cambia nada más.
• El h1 y la acción principal de la vista no van aquí: son la primera fila del panel de control. La barra solo contiene los elementos comunes a todas las vistas.

Sin JavaScript

No cambia nada.

El panel y la lista de cuenta son ventanas emergentes que abre popovertarget del botón, sin scripts; la búsqueda del catálogo muestra un enlace al índice alfabético. En navegadores sin la API de ventanas emergentes, la barra lateral queda en la página, encima del contenido; el botón de menú no se muestra y la lista de cuenta permanece debajo de su botón.

Teclado y ARIA

• Orden: el del código fuente y la pantalla. Enlace para saltar al contenido, barra lateral (una columna a partir de 769 px), búsqueda, cuenta y vista. A 768 px o menos, el panel cerrado queda fuera del orden: enlace para saltar al contenido, botón de menú, búsqueda, cuenta y vista.
• Teclas: Enter o Espacio en el botón de menú abre el panel y, en el botón de cuenta, abre la lista; Tab recorre los enlaces en orden; Escape lo cierra y devuelve el foco al botón.
• Nombres: el botón de menú se llama «Menú» (aria-label, traducido como el resto de la página). El nombre del botón de cuenta son primero las iniciales y después el nombre: «AM Ana Martín», así quien busque «AM» lo encontrará a cualquier ancho. El navegador expone el estado expandido de los botones.
• No es un menú: la lista de cuenta es una lista de enlaces en una ventana emergente. No lleva role="menu" ni aria-haspopup, y no se usan las teclas de flecha.
• Puntos de referencia: un <header> dentro de .o-main, que es un <div>, es el banner de la página y va junto a <main>, nunca dentro. La barra lateral es el único elemento de navegación y se llama «Principal». Pon primero el enlace para saltar al contenido: omite la barra lateral y la barra superior.

La pestaña Diseño contiene el contraste y el foco.

Diseño

Cuándo usarlo

Usa la cabecera en la parte superior del área principal de cada vista de una aplicación: así siempre se encuentran la búsqueda y la cuenta en el mismo lugar.

• Una fila discreta con herramientas globales: botón de menú, búsqueda y cuenta.
• El nombre del producto en el móvil, donde la marca de la barra lateral queda detrás del panel.

Cuándo no usarlo

No la uses para el título ni las acciones de la vista: van en la primera fila del panel de control.

• Una cabecera por página, dentro de .o-main: es el banner de la página.
• No pongas un botón principal en la barra: la acción principal de la vista se perdería entre los elementos de interfaz.
• Para una barra con secciones propias del sitio, usa la barra de navegación en la cabecera del sitio.

Qué hacer y qué no

Cómo escribir el contenido

El producto es un nombre; la cuenta corresponde a una persona; la lista contiene las acciones que puede realizar sobre su cuenta.

• Producto: el nombre tal como aparece en la marca de la barra lateral. No lo acortes: se parte en varias líneas.
• Cuenta: nombre completo de la persona e iniciales en el avatar. La foto lleva alt vacío, así que el nombre identifica el botón.
• Lista: de dos a cuatro enlaces, cada uno con un verbo o sustantivo conocido: «Configuración de la cuenta», «Cerrar sesión». Pon «Cerrar sesión» el último.
• Botón de menú: «Menú», traducido como el resto de la página.

Contraste y foco

El texto y los controles aparecen sobre la superficie de la página; las iniciales, sobre el fondo sutil de la marca.

Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo requerido corresponde a WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.

• Foco: cada control de la barra conserva el anillo de core, de 2 px y color --luz-focus-ring. La barra es fija y .o-sticky evita que los elementos a los que se llega con Tab queden debajo.
• Bordes: la línea debajo de la barra (--luz-divider) es decorativa y no tiene mínimo; se conserva con colores forzados.
• Área de activación: el botón de cuenta mide al menos 44 por 44 px en cualquier ancho y oculta el nombre.

Tokens que usa

Los 10 tokens que usan las reglas de .luz-app-bar de components/app-bar.css del catálogo, agrupados por familia. Cada familia enlaza a su página, donde figuran los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color

--luz-divider, --luz-surface-page, --luz-text-primary

Spacing and sizing

--luz-control-lg, --luz-space-2xs, --luz-space-md, --luz-space-xl, --luz-space-xs

Typography

--luz-text-md

Layout and breakpoints

--luz-bar-h

La pestaña Código contiene el teclado y ARIA.