DESY

Sistema de Diseño del Gobierno de Aragón.

Índice de apartados de esta página

Cabeceras

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

Mostrar parámetros

Parámetros del componente

              params:
- name: skipLink
  type: component
  required: false
  description: The skipLink component parameters
- name: homepageUrl
  type: string
  required: false
  description: The url of the homepage. Defaults to /
- name: expandedLogo
  type: boolean
  required: false
  description: When true, the logo has the complete logo with text. Use it when showing header to citizen public apps.
- name: noLogo
  type: boolean
  required: false
  description: When true, there will be no Gobierno de Aragón logo.
- name: customLogoHtml
  type: string
  required: false
  description: HTML for the custom logo. If provided there will appear a custom logo after the Gobierno de Aragón logo
- name: mobileTitle
  type: object
  required: false
  description: The title of the app that appears after the logo only in mobile.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text for the mobileTitle. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML for the mobileTitle. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the mobileTitle.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the mobileTitle.
- name: subnav
  type: object
  required: false
  description: Options for the subnav at right.
   params:
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text for the dropdown. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML for the dropdown. If `html` is provided, the `text` argument will be ignored.
  - name: hiddenText
    type: string
    required: false
    description: Text for screenreaders only after the dropdown element.
  - name: classesContainer
    type: string
    required: false
    description: Classes to add to the container div of dropdown and tooltip elements.
  - name: classesTooltip
    type: string
    required: false
    description: Classes to add to the tooltip content.
  - name: classes
    type: string
    required: false
    description: Classes to add to the dropdown element.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the dropdown element.
  - name: contentHtml
    type: string
    required: true
    description: Html content inside the subnav once opened.
  - name: items
    type: array
    required: false
    description: An array of navigation item objects in subnav. If no items are defined, there will be simple text instead a dropdown.
    params:
    - name: href
      type: string
      required: true
      description: Item link.
    - name: target
      type: string
      required: false
      description: The target where the item should link to.
    - name: text
      type: string
      required: true
      description: If `html` is set, this is not required. Text to use within each nav item. If `html` is provided, the `text` argument will be ignored.
    - name: html
      type: string
      required: true
      description: If `text` is set, this is not required. HTML to use within each nav item. If `html` is provided, the `text` argument will be ignored.
    - name: id
      type: string
      required: false
      description: Specific id attribute for the checkbox item. If omitted, then idPrefix option will be applied.
    - name: active
      type: boolean
      required: false
      description: If true, item will be active.
    - name: disabled
      type: boolean
      required: false
      description: If true, checkbox will be disabled.
    - name: divider
      type: boolean
      required: false
      description: If true, a divider border will be shown after the item.
    - name: classes
      type: string
      required: false
      description: Classes to add to the item.
    - name: attributes
      type: object
      required: false
      description: HTML attributes (for example data attributes) to add to the item.
- name: dropdown
  type: object
  required: false
  description: Options for the dropdown at right.
   params:
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text for the dropdown. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML for the dropdown. If `html` is provided, the `text` argument will be ignored.
  - name: hiddenText
    type: string
    required: false
    description: Text for screenreaders only after the dropdown element.
  - name: classesContainer
    type: string
    required: false
    description: Classes to add to the container div of dropdown and tooltip elements. Defaults to 'hidden lg:block'
  - name: classesTooltip
    type: string
    required: false
    description: Classes to add to the tooltip content.
  - name: classes
    type: string
    required: false
    description: Classes to add to the dropdown element.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the dropdown element.
  - name: contentHtml
    type: string
    required: true
    description: Html content inside the dropdown once opened.
  - name: items
    type: array
    required: true
    description: An array of navigation item objects in subnav dropdown. If `items` is provided, the `contentHtml` argument will be ignored.
    params:
    - name: href
      type: string
      required: true
      description: Item link.
    - name: target
      type: string
      required: false
      description: The target where the item should link to.
    - name: text
      type: string
      required: true
      description: If `html` is set, this is not required. Text to use within each nav item. If `html` is provided, the `text` argument will be ignored.
    - name: html
      type: string
      required: true
      description: If `text` is set, this is not required. HTML to use within each nav item. If `html` is provided, the `text` argument will be ignored.
    - name: id
      type: string
      required: false
      description: Specific id attribute for the checkbox item. If omitted, then idPrefix option will be applied.
    - name: active
      type: boolean
      required: false
      description: If true, item will be active.
    - name: disabled
      type: boolean
      required: false
      description: If true, checkbox will be disabled.
    - name: divider
      type: boolean
      required: false
      description: If true, a divider border will be shown after the item.
    - name: classes
      type: string
      required: false
      description: Classes to add to the item.
    - name: attributes
      type: object
      required: false
      description: HTML attributes (for example data attributes) to add to the item.
- name: navigation
  type: object
  required: false
  description: Options for the navigation main menu.
   params:
  - name: classes
    type: string
    required: false
    description: Classes for the navigation menu component. Defaults to 'hidden lg:block'
  - name: items
    type: array
    required: true
    description: An array of navigation item objects in main menu.
    params:
    - name: text
      type: string
      required: false
      description: Text for the navigation item. If `html` is provided, the `text` argument will be ignored.
    - name: html
      type: string
      required: false
      description: HTML for the navigation item. If `html` is provided, the `text` argument will be ignored.
    - name: href
      type: string
      required: false
      description: Url of the navigation item anchor. Both `href` and `text` attributes for navigation items need to be provided to create an item.
    - name: target
      type: string
      required: false
      description: The target where the item should link to.
    - name: active
      type: boolean
      required: false
      description: Flag to mark the navigation item as active or not.
    - name: attributes
      type: object
      required: false
      description: HTML attributes (for example data attributes) to add to the navigation item anchor.
- name: customNavigationHtml
  type: string
  required: false
  description: HTML for the custom navigation area. If provided there will appear an embed area where you can nest custom navigation after the default one.
- name: offcanvas
  type: object
  required: false
  description: Options for the offcanvas menu.
   params:
  - name: text
    type: string
    required: true
    description: Text for the offcanvas button.
  - name: textClose
    type: string
    required: true
    description: Text for the offcanvas button for close. Only visible in screenreaders.
  - name: classes
    type: string
    required: false
    description: Classes for the offcanvas component. Defaults to '-mr-2 flex lg:hidden'.
- name: containerClasses
  type: string
  required: false
  description: Classes for the container, useful if you want to make the header fixed width.
- name: classes
  type: string
  required: false
  description: Classes to add to the header container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the header container.
- name: caller
  type: nunjucks-block
  required: false
  description: Content inside the offcanvas. Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire header component in a `call` block.

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 activateItemHeaderNavigation(elementMenu, idItemSeleccionado) para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe activateItemHeaderNavigation("header-nav-item", "page-catalogo") para desactivar el item actual y activar el tercer item del header de la página.

Gestor de expedientes

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=\"Navegación principal\">\n              <ul class=\"flex flex-wrap gap-base c-menu-navigation__list\">\n                <li class=\"relative\">\n                  <button aria-expanded=\"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 max-w-xs align-middle truncate 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-none 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-none 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-none 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-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 max-w-xs align-middle truncate 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-none 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-none 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-none 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-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 max-w-xs align-middle truncate 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-none 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-none 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-none 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-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 max-w-xs align-middle truncate 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-none 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-none 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-none 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\"><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.

Gestor de expedientes

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": {
      "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-none 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-none 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-none focus:shadow-outline-focus focus:text-black"    id="nav-mobile-pages-3">
                      Bandejas
                  </a>
                </li>
                <li class="my-sm border-b border-neutral-base" 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-none 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-none 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" 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none focus:shadow-outline-focus focus:text-black"    id="nav-mobile-pages-3">
                      Bandejas
                  </a>
                </li>
                <li class="my-sm border-b border-neutral-base" 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-none 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-none 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" 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-none 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-none 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-none 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-none 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-none 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\">Marta Pérez <br>(Administración)</span>",
    "items": [
      {
        "text": "Perfil",
        "href": "/"
      },
      {
        "text": "Cerrar sesión",
        "href": "/"
      }
    ]
  }
}) }}

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

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-none 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-none 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-none focus:shadow-outline-focus focus:text-black"    id="nav-mobile-pages-3">
                      Bandejas
                  </a>
                </li>
                <li class="my-sm border-b border-neutral-base" 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-none 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-none 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" 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-none 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-none 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-none 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-none 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-none 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
}) }}