DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Cabeceras

Componentes principales

Se trata de un elemento siempre disponible en la parte superior de la pantalla. Proporciona un acceso a funciones de todo el sistema y elementos de navegación local.

Header

Por defecto

El menú por defecto de las aplicaciones de la administración digital tiene un logo que enlaza a la página de inicio y un menu principal de navegación. El menu de navegación se oculta en mobile si no se añaden clases a navigation. El logotipo es simple, sin letras, si la app está diseñada para funcionarios. Junto al logo hay un texto que da nombre a la app en la que estamos. Puedes usar con javascript la función global activateItemMenuNavigation(elementMenu, idItemSeleccionado) para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe activateItemMenuNavigation('header-nav-item', 'page-catalogo') para desactivar el item actual y activar el tercer item del header de la página.

Descripción visual

Header con fondo blanco y borde gris claro superior e inferior de 1px. Contiene logo naranja y blanco a la izquierda, seguido de botón y cuatro elementos de navegación en texto negro alineados horizontalmente. Altura aproximada de 60px con padding interno uniforme.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/header/_macro.header.njk" import componentHeader %}
{{ componentHeader({
  "homepageUrl": "/",
  "idPrefix": "mi-menu",
  "mobileTitle": {
    "text": "Gestor de expedientes"
  },
  "subnav": {
    "text": "Gestor de expedientes"
  },
  "navigation": {
    "items": [
      {
        "href": "#1",
        "text": "Navigation item 1"
      },
      {
        "href": "#2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#3",
        "text": "Navigation item 3"
      },
      {
        "href": "#4",
        "text": "Navigation item 4"
      }
    ]
  }
}) }}

Con navegación personalizada

Tras nuestro menú de navegación tenemos customNavigationHtml una zona anidable para poder añadir una navegación personalizada.

Descripción visual

Header con fondo blanco y borde gris claro de 1px en todos los lados. Logo naranja y blanco a la izquierda, botón, tres elementos de navegación personalizados en texto negro con desplegables, y un enlace alineado al extremo derecho. Altura de 60px con elementos distribuidos horizontalmente en el espacio disponible.

Gestor de expedientes

Mostrar códigodel ejemplo: Con navegación personalizada

Contenido

Nunjucks macro
{% from "components/header/_macro.header.njk" import componentHeader %}
{{ componentHeader({
  "homepageUrl": "/",
  "mobileTitle": {
    "text": "Gestor de expedientes"
  },
  "subnav": {
    "text": "Gestor de expedientes"
  },
  "customNavigationHtml": "<div class='flex flex-wrap flex-1 gap-base'>\n  \n            <!-- menu-navigation -->\n            <nav data-module=\"c-menu-navigation\" class=\"c-menu-navigation--last-right hidden lg:block w-full bg-neutral-lighter \" aria-label=\"Menú principal\">\n              <ul class=\"flex flex-wrap gap-base c-menu-navigation__list\">\n                <li class=\"relative\">\n                  <button aria-expanded=\"true\" aria-haspopup=\"true\" aria-controls=\"header-custom-nav-item-1-sub-list\" id=\"header-custom-nav-item-1\" class=\"c-menu-navigation__button c-menu-navigation__button--header -mr-base\" ><span class=\"inline-flex self-center align-middle pointer-events-none\">Custom Item 1</span>\n                    <svg class=\"inline-block -mr-2  align-middle -my-px pointer-events-none\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg></button>\n                  <div class=\"c-menu-navigation__sub absolute bottom-0 left-0\">\n                    <ul id=\"header-custom-nav-item-1-sub-list\" class=\"c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm\" aria-labelledby=\"header-custom-nav-item-1\">\n                      <li>\n                        <a href=\"#\" class=\"flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black\" id=\"sub-header-custom-nav-item-1-1\">\n                          Subitem 1\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"#\" class=\"flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black\" id=\"sub-header-custom-nav-item-1-2\">\n                          Subitem 2\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"#\" class=\"flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black\" id=\"sub-header-custom-nav-item-1-3\">\n                          Subitem 3\n                        </a>\n                      </li>\n                    </ul>\n                  </div>\n                </li>\n                <li class=\"relative\">\n                  <button aria-expanded=\"true\" aria-haspopup=\"true\" aria-controls=\"header-custom-nav-item-2-sub-list\" id=\"header-custom-nav-item-2\" class=\"c-menu-navigation__button c-menu-navigation__button--primary c-menu-navigation__button--has-selection c-menu-navigation__button--header -mr-base\" ><span class=\"sr-only\">Item activo: </span><span class=\"inline-flex self-center align-middle pointer-events-none\">Custom Active Item 2</span>\n                    <svg class=\"inline-block -mr-2  align-middle -my-px pointer-events-none\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg></button>\n                  <div class=\"c-menu-navigation__sub absolute bottom-0 left-0\">\n                    <ul id=\"header-custom-nav-item-2-sub-list\" class=\"c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm\" aria-labelledby=\"header-custom-nav-item-2\">\n                      <li>\n                        <a href=\"#\" class=\"flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black\" id=\"sub-header-custom-nav-item-2-1\">\n                          Subitem 1\n                        </a>\n                      </li>\n                      <li>\n                        <a aria-current=\"page\" href=\"#\" class=\"flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black\" id=\"sub-header-custom-nav-item-2-2\">\n                          Subitem 2\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"#\" class=\"flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black\" id=\"sub-header-custom-nav-item-2-3\">\n                          Subitem 3\n                        </a>\n                      </li>\n                    </ul>\n                  </div>\n                </li>\n                <li class=\"relative\">\n                  <button aria-expanded=\"true\" aria-haspopup=\"true\" aria-controls=\"header-custom-nav-item-3-sub-list\" id=\"header-custom-nav-item-3\" class=\"c-menu-navigation__button c-menu-navigation__button--header -mr-base\" ><span class=\"inline-flex self-center align-middle pointer-events-none\">Custom Item 3</span>\n                    <svg class=\"inline-block -mr-2  align-middle -my-px pointer-events-none\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg></button>\n                  <div class=\"c-menu-navigation__sub absolute bottom-0 left-0\">\n                    <ul id=\"header-custom-nav-item-3-sub-list\" class=\"c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm\" aria-labelledby=\"header-custom-nav-item-3\">\n                      <li>\n                        <a href=\"#\" class=\"flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black\" id=\"sub-header-custom-nav-item-3-1\">\n                          Subitem 1\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"#\" class=\"flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black\" id=\"sub-header-custom-nav-item-3-2\">\n                          Subitem 2\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"#\" class=\"flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black\" id=\"sub-header-custom-nav-item-3-3\">\n                          Subitem 3\n                        </a>\n                      </li>\n                    </ul>\n                  </div>\n                </li>\n                <li class=\"relative\">\n                  <button aria-expanded=\"true\" aria-haspopup=\"true\" aria-controls=\"header-custom-nav-item-4-sub-list\" id=\"header-custom-nav-item-4\" class=\"c-menu-navigation__button c-menu-navigation__button--header\" ><span class=\"inline-flex self-center align-middle pointer-events-none\">Item 4 right</span>\n                    <svg class=\"inline-block -mr-2  align-middle -my-px pointer-events-none\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg></button>\n                  <div class=\"c-menu-navigation__sub absolute bottom-0 left-0\">\n                    <ul id=\"header-custom-nav-item-4-sub-list\" class=\"c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm\" aria-labelledby=\"header-custom-nav-item-4\">\n                      <li>\n                        <a href=\"#\" class=\"flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black\" id=\"sub-header-custom-nav-item-4-1\">\n                          Subitem 1\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"#\" class=\"flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black\" id=\"sub-header-custom-nav-item-4-2\">\n                          Subitem 2\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"#\" class=\"flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black\" id=\"sub-header-custom-nav-item-4-3\">\n                          Subitem 3\n                        </a>\n                      </li>\n                    </ul>\n                  </div>\n                </li>\n              </ul>\n            </nav>\n            <!-- /menu-navigation -->\n            \n</div>"
}) }}

Con navegación personalizada a la derecha

En el customNavigationHtml podemos añadir elementos posicionados a la derecha.

Descripción visual

Header con fondo blanco y borde gris claro de 1px. Logo naranja y blanco y botón alineados a la izquierda, espacio vacío central amplio, e ícono de usuario negro circular alineado al extremo derecho. Altura de 60px con distribución espaciada entre elementos izquierdos y derecho.

Gestor de expedientes

Mostrar códigodel ejemplo: Con navegación personalizada a la derecha

Contenido

Nunjucks macro
{% from "components/header/_macro.header.njk" import componentHeader %}
{{ componentHeader({
  "homepageUrl": "/",
  "mobileTitle": {
    "text": "Gestor de expedientes"
  },
  "subnav": {
    "text": "Gestor de expedientes"
  },
  "customNavigationHtml": "<div class='relative flex justify-end items-center flex-1 gap-base'><div class='absolute -top-3 right-0 text-black'><a href='#'><svg class='w-5 h-5' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' aria-label='Notificaciones' role='img'><path d='M7.25 12.5h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5Z' fill='currentColor' transform='scale(3.42857)'/><g transform='scale(3.42857)'><circle cx='10.5' cy='2.5' r='2.5' fill='currentColor'/><path d='M11.5 10a1 1 0 0 1-1-1V6.74a.25.25 0 0 0-.24-.25 4 4 0 0 1-3.76-4 3.43 3.43 0 0 1 .11-.86.12.12 0 0 0 0-.1.15.15 0 0 0-.09 0 4 4 0 0 0-4 4V9a1 1 0 0 1-1 1 .5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1Z' fill='currentColor'/></g></svg></a></div></div>"
}) }}

Pasando parámetros customizados al componente Skip Link. Útil para hacer plantillas de página con barra lateral o con un contenido principal localizado en otro sitio diferente al habitual.

Descripción visual

Header con fondo naranja degradado que contiene un enlace skipLink con texto negro sobre fondo amarillo en la parte superior. Debajo hay una barra de navegación horizontal con logo de rayas naranjas a la izquierda, seguido de texto y cuatro elementos de navegación en texto negro, con uno resaltado en fondo naranja. Borde gris claro rodea todo el componente.

Mostrar códigodel ejemplo: Con enlace de skiplink personalizado

Contenido

Nunjucks macro
{% from "components/header/_macro.header.njk" import componentHeader %}
{{ componentHeader({
  "skipLink": {
    "text": "Saltar al contenido central",
    "href": "#content-center",
    "classes": "ds-focus",
    "attributes": {
      "id": "skip-link",
      "attr-example": "custom-data"
    }
  },
  "homepageUrl": "/",
  "mobileTitle": {
    "text": "Gestor de expedientes"
  },
  "subnav": {
    "text": "Gestor de expedientes"
  },
  "navigation": {
    "items": [
      {
        "href": "#1",
        "text": "Navigation item 1"
      },
      {
        "href": "#2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#3",
        "text": "Navigation item 3"
      },
      {
        "href": "#4",
        "text": "Navigation item 4"
      }
    ]
  }
}) }}

Logo expandido

Con el parámetro 'expandedLogo': true se muestra el logo de la organización en formato expandido. Utilizar este logotipo en apps que estén dirigidas al ciudadano y también antes de hacer login en todas las apps.

Descripción visual

Header con fondo blanco que muestra el logo con texto negro y rayas naranjas horizontales. El logo está alineado a la izquierda con espaciado generoso alrededor. Borde gris claro delimita el componente completo.

Mostrar códigodel ejemplo: Logo expandido

Contenido

Nunjucks macro
{% from "components/header/_macro.header.njk" import componentHeader %}
{{ componentHeader({
  "homepageUrl": "/",
  "expandedLogo": true
}) }}

Con offcanvas

Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller.

Descripción visual

Header con fondo blanco que presenta un logo de rayas naranjas horizontales a la izquierda, seguido de texto en negro. Layout horizontal simple con elementos alineados verticalmente al centro. Borde gris claro rodea el componente.

Gestor de expedientes

Mostrar códigodel ejemplo: Con offcanvas

Contenido

Nunjucks macro

{% from "components/header/_macro.header.njk" import componentHeader %}
{% call componentHeader({
  "homepageUrl": "/",
  "mobileTitle": {
    "text": "Gestor de expedientes"
  },
  "subnav": {
    "text": "Gestor de expedientes"
  },
  "offcanvas": {
    "text": "Menú",
    "textClose": "Cerrar menu",
    "labelledId": "offcanvas-title"
  }
}) %}
<nav class="w-full p-2" aria-label="Menú móvil">
                  <h3 class="p-base text-base font-bold">Gestor de expedientes</h3>
                  
              <!-- nav -->
              <ul data-module="c-nav" class="text-sm" aria-label="Lista de páginas">
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"   aria-current="page"  id="nav-mobile-pages-1">
                      <strong class="font-bold">Inicio</strong>
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-pages-2">
                      Expedientes
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-pages-3">
                      Bandejas
                  </a>
                </li>
                <li class="my-sm border-b border-neutral-base" role="none" aria-hidden="true">
                  <div class="sr-only">Separador</div>
                </li>
                
              </ul>
              <!-- /nav -->
                  <h3 class="p-base text-base font-bold">Usuario/a: Marta Pérez</h3>
                  
              <!-- nav -->
              <ul data-module="c-nav" class="text-sm" aria-label="Lista de acciones de usuario">
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-user-1">
                      Perfil
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-user-2">
                      Cerrar sesión
                  </a>
                </li>
                <li class="my-sm border-b border-neutral-base" role="none" aria-hidden="true">
                  <div class="sr-only">Separador</div>
                </li>
                
              </ul>
              <!-- /nav -->
              <!-- details -->
              <details class=" px-base">
                <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black">
                  <span class="c-link text-sm">
                    Cambiar de aplicación
                  </span>
                </summary>
                <div class="py-sm">
                  <div>
                            
              <!-- nav -->
              <ul data-module="c-nav" class="text-sm" aria-label="Lista de aplicaciones">
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"   aria-current="page"  id="nav-mobile-apps-1">
                      <strong class="font-bold">Gestor de expedientes</strong>
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-apps-2">
                      Catálogo de servicios
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-apps-3">
                      Bandeja de entrada
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-apps-4">
                      Sistema de comprobación y verificación de documentos por CSV
                  </a>
                </li>
                
              </ul>
              <!-- /nav -->
                  </div>
                </div>
              </details>
              <!-- /details -->  </nav>
{% endcall  %}

Con offcanvas y mobiletitle

Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller y título que sólo se muestra en mobile.

Descripción visual

Header con fondo blanco y borde gris claro inferior. Contiene un ícono naranja apilado (tres líneas horizontales) a la izquierda y texto negro centrado verticalmente. Altura contenida con padding vertical moderado.

Gestor de expedientes

Mostrar códigodel ejemplo: Con offcanvas y mobiletitle

Contenido

Nunjucks macro

{% from "components/header/_macro.header.njk" import componentHeader %}
{% call componentHeader({
  "homepageUrl": "/",
  "mobileTitle": {
    "text": "Gestor de expedientes"
  },
  "subnav": {
    "text": "Gestor de expedientes"
  },
  "offcanvas": {
    "text": "Menú",
    "textClose": "Cerrar menu",
    "labelledId": "offcanvas-title"
  }
}) %}
<nav class="w-full p-2" aria-label="Menú móvil">
                  <h3 class="p-base text-base font-bold">Gestor de expedientes</h3>
                  
              <!-- nav -->
              <ul data-module="c-nav" class="text-sm" aria-label="Lista de páginas">
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"   aria-current="page"  id="nav-mobile-pages-1">
                      <strong class="font-bold">Inicio</strong>
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-pages-2">
                      Expedientes
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-pages-3">
                      Bandejas
                  </a>
                </li>
                <li class="my-sm border-b border-neutral-base" role="none" aria-hidden="true">
                  <div class="sr-only">Separador</div>
                </li>
                
              </ul>
              <!-- /nav -->
                  <h3 class="p-base text-base font-bold">Usuario/a: Marta Pérez</h3>
                  
              <!-- nav -->
              <ul data-module="c-nav" class="text-sm" aria-label="Lista de acciones de usuario">
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-user-1">
                      Perfil
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-user-2">
                      Cerrar sesión
                  </a>
                </li>
                <li class="my-sm border-b border-neutral-base" role="none" aria-hidden="true">
                  <div class="sr-only">Separador</div>
                </li>
                
              </ul>
              <!-- /nav -->
              <!-- details -->
              <details class=" px-base">
                <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black">
                  <span class="c-link text-sm">
                    Cambiar de aplicación
                  </span>
                </summary>
                <div class="py-sm">
                  <div>
                            
              <!-- nav -->
              <ul data-module="c-nav" class="text-sm" aria-label="Lista de aplicaciones">
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"   aria-current="page"  id="nav-mobile-apps-1">
                      <strong class="font-bold">Gestor de expedientes</strong>
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-apps-2">
                      Catálogo de servicios
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-apps-3">
                      Bandeja de entrada
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-apps-4">
                      Sistema de comprobación y verificación de documentos por CSV
                  </a>
                </li>
                
              </ul>
              <!-- /nav -->
                  </div>
                </div>
              </details>
              <!-- /details -->  </nav>
{% endcall  %}

Con subnav text

Utilizar para mostrar el nombre de la app actual. Si no se proporcionan items en subnav, el texto será simple sin un dropdown.

Descripción visual

Header con fondo blanco y borde gris claro inferior. Incluye ícono naranja apilado (tres líneas horizontales) a la izquierda seguido de texto negro. Barra de subnavegación integrada debajo con fondo gris muy claro ocupando ancho completo.

Gestor de expedientes

Mostrar códigodel ejemplo: Con subnav text

Contenido

Nunjucks macro
{% from "components/header/_macro.header.njk" import componentHeader %}
{{ componentHeader({
  "homepageUrl": "/",
  "mobileTitle": {
    "text": "Gestor de expedientes"
  },
  "subnav": {
    "text": "Gestor de expedientes"
  }
}) }}

Con subnav items

Un dropdown junto al logo que ha de usarse para mostrar el nombre de la app en la que estamos y para navegar a otra app diferente. Usamos los items proporcionados para la navegación.

Descripción visual

Header con fondo blanco y borde gris claro superior e inferior. Presenta ícono naranja apilado (tres líneas horizontales) seguido de texto negro con indicador dropdown (flecha hacia abajo). Sección de subnavegación con fondo gris muy claro debajo ocupando ancho total del contenedor.

Mostrar códigodel ejemplo: Con subnav items

Contenido

Nunjucks macro
{% from "components/header/_macro.header.njk" import componentHeader %}
{{ componentHeader({
  "homepageUrl": "/",
  "mobileTitle": {
    "text": "Gestor de expedientes"
  },
  "subnav": {
    "text": "Gestor de expedientes",
    "items": [
      {
        "href": "#",
        "text": "Gestor de expedientes",
        "active": true
      },
      {
        "href": "#",
        "text": "Catálogo de servicios"
      },
      {
        "href": "#",
        "text": "Bandeja de entrada"
      },
      {
        "href": "#",
        "text": "Sistema de comprobación y verificación de documentos por CSV"
      }
    ]
  }
}) }}

Con dropdown

Un dropdown a la derecha que puede usarse para mostrar información adicional, normalmante relativa a la cuenta de usuario, como: Perfil y Cerrar sesión. Se oculta por defecto en anchuras pequeñas si no se le añaden clases a dropdown.

Descripción visual

Header con fondo blanco y borde gris claro inferior de 1px. Contiene logo naranja alineado a la izquierda y texto negro con tamaño mediano alineado a la derecha seguido de un icono de flecha dropdown. Altura aproximada de 60px con espaciado interno horizontal generoso.

Mostrar códigodel ejemplo: Con dropdown

Contenido

Nunjucks macro
{% from "components/header/_macro.header.njk" import componentHeader %}
{{ componentHeader({
  "homepageUrl": "/",
  "mobileTitle": {
    "text": "Gestor de expedientes"
  },
  "dropdown": {
    "text": "Marta Pérez",
    "items": [
      {
        "text": "Perfil",
        "href": "/"
      },
      {
        "text": "Cerrar sesión",
        "href": "/"
      }
    ]
  }
}) }}

Con dropdown personalizado

Se pueden usar los parámetros del dropdown para personalizarlo. En este ejemplo con HTML en el dropdown.

Descripción visual

Header con fondo gris muy claro y borde gris medio de 1px en todo el perímetro. Logo naranja posicionado a la izquierda, texto negro en peso normal alineado a la derecha con subtexto gris pequeño debajo. Altura de 80px con espaciado vertical amplio.

Gestor de expedientes

Mostrar códigodel ejemplo: Con dropdown personalizado

Contenido

Nunjucks macro
{% from "components/header/_macro.header.njk" import componentHeader %}
{{ componentHeader({
  "homepageUrl": "/",
  "mobileTitle": {
    "text": "Gestor de expedientes"
  },
  "dropdown": {
    "html": "<span class='block text-right'><span class='block'>Marta Pérez</span> <span class='block'>(Administración)</span></span>",
    "items": [
      {
        "text": "Perfil",
        "href": "/"
      },
      {
        "text": "Cerrar sesión",
        "href": "/"
      }
    ],
    "classesTooltip": "min-w-auto!"
  }
}) }}

Con contenido personalizado en dropdown

El dropdown puede contener cualquier tipo de información.

Descripción visual

Header con fondo blanco y borde gris claro inferior de 1px. Logo naranja ubicado a la izquierda, texto negro de tamaño mediano con icono de flecha alineado a la derecha. Altura de 60px con distribución de elementos similar al espaciado horizontal estándar entre componentes.

Gestor de expedientes

Mostrar códigodel ejemplo: Con contenido personalizado en dropdown

Contenido

Nunjucks macro
{% from "components/header/_macro.header.njk" import componentHeader %}
{{ componentHeader({
  "homepageUrl": "/",
  "mobileTitle": {
    "text": "Gestor de expedientes"
  },
  "dropdown": {
    "text": "Marta Pérez",
    "contentHtml": "<div class='p-base'><dl><dt class='text-base'>Marta Pérez</dt><dd class='text-sm text-neutral-dark'>Departamento de Ciencia, Universidad y Sociedad del Conocimiento</dd></dl></div>",
    "classesTooltip": "w-64! max-h-48! overflow-y-auto",
    "attributes": {
      "data-aria-haspopup": "dialog",
      "data-role": "dialog",
      "data-aria-modal": "false",
      "data-aria-label": "Información adicional"
    }
  }
}) }}

Con todo

Logo, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.

Descripción visual

Header con fondo blanco que incluye un logo naranja a la izquierda (icono de barras horizontales), seguido de un desplegable con texto negro, tres enlaces de navegación en texto negro, y texto negro alineado a la derecha. Altura aproximada de 50-60px con elementos distribuidos horizontalmente en línea.

Mostrar códigodel ejemplo: Con todo

Contenido

Nunjucks macro

{% from "components/header/_macro.header.njk" import componentHeader %}
{% call componentHeader({
  "homepageUrl": "/",
  "mobileTitle": {
    "text": "Gestor de expedientes"
  },
  "subnav": {
    "text": "Gestor de expedientes",
    "items": [
      {
        "href": "#",
        "text": "Gestor de expedientes",
        "active": true
      },
      {
        "href": "#",
        "text": "Catálogo de servicios"
      },
      {
        "href": "#",
        "text": "Bandeja de entrada"
      },
      {
        "href": "#",
        "text": "Sistema de comprobación y verificación de documentos por CSV"
      }
    ]
  },
  "navigation": {
    "items": [
      {
        "href": "#1",
        "text": "Navigation item 1"
      },
      {
        "href": "#2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#3",
        "text": "Navigation item 3"
      }
    ]
  },
  "dropdown": {
    "text": "Marta Pérez",
    "items": [
      {
        "text": "Perfil",
        "href": "/"
      },
      {
        "text": "Cerrar sesión",
        "href": "/"
      }
    ]
  },
  "offcanvas": {
    "text": "Menú",
    "textClose": "Cerrar menu"
  }
}) %}
<nav class="w-full p-2" aria-label="Menú móvil">
                  <h3 class="p-base text-base font-bold">Gestor de expedientes</h3>
                  
              <!-- nav -->
              <ul data-module="c-nav" class="text-sm" aria-label="Lista de páginas">
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"   aria-current="page"  id="nav-mobile-pages-1">
                      <strong class="font-bold">Inicio</strong>
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-pages-2">
                      Expedientes
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-pages-3">
                      Bandejas
                  </a>
                </li>
                <li class="my-sm border-b border-neutral-base" role="none" aria-hidden="true">
                  <div class="sr-only">Separador</div>
                </li>
                
              </ul>
              <!-- /nav -->
                  <h3 class="p-base text-base font-bold">Usuario/a: Marta Pérez</h3>
                  
              <!-- nav -->
              <ul data-module="c-nav" class="text-sm" aria-label="Lista de acciones de usuario">
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-user-1">
                      Perfil
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-user-2">
                      Cerrar sesión
                  </a>
                </li>
                <li class="my-sm border-b border-neutral-base" role="none" aria-hidden="true">
                  <div class="sr-only">Separador</div>
                </li>
                
              </ul>
              <!-- /nav -->
              <!-- details -->
              <details class=" px-base">
                <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black">
                  <span class="c-link text-sm">
                    Cambiar de aplicación
                  </span>
                </summary>
                <div class="py-sm">
                  <div>
                            
              <!-- nav -->
              <ul data-module="c-nav" class="text-sm" aria-label="Lista de aplicaciones">
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"   aria-current="page"  id="nav-mobile-apps-1">
                      <strong class="font-bold">Gestor de expedientes</strong>
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-apps-2">
                      Catálogo de servicios
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-apps-3">
                      Bandeja de entrada
                  </a>
                </li>
                <li>
                  <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black"    id="nav-mobile-apps-4">
                      Sistema de comprobación y verificación de documentos por CSV
                  </a>
                </li>
                
              </ul>
              <!-- /nav -->
                  </div>
                </div>
              </details>
              <!-- /details -->  </nav>
{% endcall  %}

Email template example

Ejemplo de uso en platilla de email por defecto. Sólo con logo expandido.

Descripción visual

Header con fondo gris claro que contiene únicamente el logo alineado a la izquierda, compuesto por barras horizontales naranjas y texto negro en dos líneas. Altura aproximada de 60-70px con padding vertical generoso, diseño minimalista sin navegación ni elementos adicionales.

Mostrar códigodel ejemplo: Email template example

Contenido

Nunjucks macro
{% from "components/header/_macro.header.njk" import componentHeader %}
{{ componentHeader({
  "homepageUrl": "https://www.aragon.es/",
  "expandedLogo": true
}) }}