Encabezado (header)

El header es una sección ubicada en la parte superior de la página que contiene elementos y componentes relacionados a la navegación. Su función es permitir que la persona usuaria pueda navegar y acceder intuitivamente a las diferentes secciones de un sitio.

Uso

Cuándo usar

Debe estar presente en todas las páginas de forma consistente, para facilitar la navegación de la persona usuaria a través del sitio web.
Para mantener las navegaciones principales y la presencia de la marca en un primer nivel.

Cuándo no usar

Para categorías internas o filtrado dentro de una página, utilizar Pestañas en su lugar.
Para mantener las navegaciones principales y la presencia de la marca en un primer nivel.
Para navegaciones de 2do nivel o subsecciones de contenido, considerar la Navegación horizontal o la Navegación vertical dependiendo del tipo de página.

Ejemplos de uso

Navegación principal

Los enlaces de navegación redirigen a las secciones y/o páginas principales de la arquitectura de información del sitio web.

Cómo usar la navegacion principal de header

check

Utilizar hasta 7 enlaces de navegación, dependiendo del tipo de encabezado (header).

No utilizar más de 7 enlaces de navegación, o más de las navegaciones disponibles para cada tipo de encabezado (header) y sus variantes.

Opciones de navegación

Las opciones de navegación se utilizan como subsecciones dentro de un desplegable de navegación del encabezado (header).

check

Utilizar una opción de navegación con link de acceso cuando hay más de 6 opciones.

Cómo no usar las opciones de navegación del header

No utilizar una opción link si las subsecciones no superan las 6 opciones.

Tipos de encabezado (header)

Existen 2 tipos de header según la cantidad de navegaciones y el estado de la cuenta de la persona usuaria (con sesión iniciada y sin iniciar sesión).

Desktop deslogueado | En 1 línea

El encabezado (header) de 1 línea es el tipo de encabezado que se utiliza por defecto.

Desktop logueado | En 1 línea

El encabezado (header) de 1 línea es el tipo de encabezado que se utiliza por defecto.

Desktop deslogueado | En 2 líneas

El encabezado (header) de 2 líneas se utiliza cuando la cantidad de navegaciones excede al espacio disponible en 1 línea.

Desktop logueado | En 2 líneas

El encabezado (header) de 2 líneas se utiliza cuando la cantidad de navegaciones excede al espacio disponible en 1 línea.

Mobile

El encabezado (header) en su versión mobile pasa a ser un menú desplegable con la reorganización de los elementos que lo componen.

Encabezado (header) con slots

Un espacio reservado o slot es un componente local del sistema de diseño, que solo existe en Figma, y se utiliza para flexibilizar el uso de un componente del UI kit. Los slots permiten adoptar el sistema de diseño y utilizar componentes de la librería sin la necesidad de generar nuevas estructuras.

En el caso del encabezado (header), el slot cumple la función del logo. El diseñador en Figma puede replicar la flexibilidad de uso del código.

Uso del componente en Figma

Para evitar romper el vínculo del componente (detachear) en Figma, los diseñadores pueden intercambiar la instancia del slot por el logo de marca y/o del activo digital, sin la necesidad de generar nuevas estructuras.

Componentizá el logo de la marca o el activo digital que adopta el sistema de diseño.
Seleccioná la variante de tamaño de slot que se adapte a tus necesidades. Existen 2 variantes: 1:1 (80x80 px. en desktop y 60x60 px. en mobile), y para logotipos horizontales (115x80 px. en desktop y 115x60 px. en mobile).
Intercambiá el slot, utilizando la propiedad de instance swap del encabezado (header), por el logo de la marca o el activo digital.

Contenido en esta página

Uso
Ejemplos de uso
Navegación principal
Opciones de navegación
Tipos de encabezado (header)
Desktop deslogueado | En 1 línea
Desktop logueado | En 1 línea
Desktop deslogueado | En 2 líneas
Desktop logueado | En 2 líneas
Mobile
Encabezado (header) con slots

Banner del GCBA

 
{/* header banner */}
<div class="header-banner">
    <img
    class="header-banner-img"
    src='/Obelisco-V2/images/header/logo_BA_banner.svg'
    alt="Gobierno de la Ciudad de Buenos Aires - Inicio"
    />
    <p class="text-sm">Gobierno de la Ciudad de Buenos Aires</p>
</div>
{/* header banner */}
<header class="o-header o-header_banner navbar" role="banner">
    <a href="#main" class="skip-to-main-content-link">
    Saltar al contenido principal
    </a>
    <div class="container header-container">
    <a href="https://www.estadisticaciudad.gob.ar/eyc/" class="navbar-brand">
        <img
        class="d-none d-xl-block"
        src='/Obelisco-V2/images/logo_ba.svg'
        alt="LOGO BA"
        />
        <img
        class="d-xl-none"
        src='/Obelisco-V2/images/logo_ba_mobile.svg'
        alt="LOGO BA"
        />
    </a>
    <div class="navbar-login-mobile">
        <a class="btn btn-lg btn-icon btn-outline-tertiary">
        <span class="material-symbols-rounded" aria-hidden="true">
            person
        </span>
        <span class="btn-text">Ingresar</span>
        </a>
    </div>
    <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarContent1"
        aria-controls="navbarContent1"
        aria-expanded="false"
        aria-label="Menú"
    ></button>
    <div class="collapse navbar-collapse" id="navbarContent1">
        <div class="navbar-content">
        <div class="navbar-sections">
            <nav>
            <p class="navbar-sections-title">Secciones</p>
            <ul class="nav nav-pills nav-sections">
                <li class="dropdown">
                <button
                    type="button"
                    class="btn btn-dropdown btn-lg"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                >
                    <span class="btn-dropdown-text ellipsis-1">Navegación</span>
                    <span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
                    expand_more
                    </span>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item item-link">
                    <span class="item-text">Ver más</span>
                    <span class="material-symbols-rounded" aria-hidden="true">
                        arrow_forward
                    </span>
                    </a>
                </div>
                </li>
                <li class="nav-item">
                <a class="nav-link nav-link-lg">
                    <span>Navegación</span>
                </a>
                </li>
                <li class="dropdown">
                <button
                    type="button"
                    class="btn btn-dropdown btn-lg"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                >
                    <span class="btn-dropdown-text ellipsis-1">Navegación</span>
                    <span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
                    expand_more
                    </span>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item item-link">
                    <span class="item-text">Ver más</span>
                    <span class="material-symbols-rounded" aria-hidden="true">
                        arrow_forward
                    </span>
                    </a>
                </div>
                </li>
            </ul>
            </nav>
        </div>
        <div class="navbar-search">
            <form class="form-search">
            <label for="header-search" class="form-label sr-only">
                Buscador
            </label>
            <div class="search-container">
                <input
                type="search"
                class="form-control input-search input-search-with-button"
                id="header-search"
                placeholder="Buscador"
                />
                <button class="reset" type="reset" aria-label="Borrar"></button>
                <button class="button-search" type="submit" aria-label="Buscar"></button>
            </div>
            </form>
        </div>
        <div class="navbar-login">
            <a class="btn btn-lg btn-outline-tertiary">
            <span class="material-symbols-rounded" aria-hidden="true">
                person
            </span>
            <span class="btn-text">Ingresar</span>
            </a>
        </div>
        </div>
    </div>
    </div>
    <div class="header-backdrop"></div>
</header>