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.

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.

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.

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.

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 del Gobierno de Aragó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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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