Header

Parámetros Nunjucks del componente: "Header". Versión: 12.0.1

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: skipLink\n  type: component\n  required: false\n  description: The skipLink component parameters\n- name: homepageUrl\n  type: string\n  required: false\n  description: The url of the homepage. Defaults to /\n- name: expandedLogo\n  type: boolean\n  required: false\n  description: When true, the logo has the complete logo with text. Use it when showing header to citizen public apps.\n- name: noLogo\n  type: boolean\n  required: false\n  description: When true, there will be no Gobierno de Aragón logo.\n- name: customLogoHtml\n  type: string\n  required: false\n  description: HTML for the custom logo. If provided there will appear a custom logo after the Gobierno de Aragón logo\n- name: mobileTitle\n  type: object\n  required: false\n  description: The title of the app that appears after the logo only in mobile.\n  - name: text\n    type: string\n    required: true\n    description: If `html` is set, this is not required. Text for the mobileTitle. If `html` is provided, the `text` argument will be ignored.\n  - name: html\n    type: string\n    required: true\n    description: If `text` is set, this is not required. HTML for the mobileTitle. If `html` is provided, the `text` argument will be ignored.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the mobileTitle.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the mobileTitle.\n- name: subnav\n  type: object\n  required: false\n  description: Options for the subnav at right.\n   params:\n  - name: text\n    type: string\n    required: true\n    description: If `html` is set, this is not required. Text for the dropdown. If `html` is provided, the `text` argument will be ignored.\n  - name: html\n    type: string\n    required: true\n    description: If `text` is set, this is not required. HTML for the dropdown. If `html` is provided, the `text` argument will be ignored.\n  - name: hiddenText\n    type: string\n    required: false\n    description: Text for screenreaders only after the dropdown element.\n  - name: classesContainer\n    type: string\n    required: false\n    description: Classes to add to the container div of dropdown and tooltip elements.\n  - name: classesTooltip\n    type: string\n    required: false\n    description: Classes to add to the tooltip content.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the dropdown element.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the dropdown element.\n  - name: contentHtml\n    type: string\n    required: true\n    description: Html content inside the subnav once opened.\n  - name: items\n    type: array\n    required: false\n    description: An array of navigation item objects in subnav. If no items are defined, there will be simple text instead a dropdown.\n    params:\n    - name: href\n      type: string\n      required: true\n      description: Item link.\n    - name: target\n      type: string\n      required: false\n      description: The target where the item should link to.\n    - name: text\n      type: string\n      required: true\n      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.\n    - name: html\n      type: string\n      required: true\n      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.\n    - name: id\n      type: string\n      required: false\n      description: Specific id attribute for the checkbox item. If omitted, then idPrefix option will be applied.\n    - name: active\n      type: boolean\n      required: false\n      description: If true, item will be active.\n    - name: disabled\n      type: boolean\n      required: false\n      description: If true, checkbox will be disabled.\n    - name: divider\n      type: boolean\n      required: false\n      description: If true, a divider border will be shown after the item.\n    - name: classes\n      type: string\n      required: false\n      description: Classes to add to the item.\n    - name: attributes\n      type: object\n      required: false\n      description: HTML attributes (for example data attributes) to add to the item.\n- name: dropdown\n  type: object\n  required: false\n  description: Options for the dropdown at right.\n   params:\n  - name: text\n    type: string\n    required: true\n    description: If `html` is set, this is not required. Text for the dropdown. If `html` is provided, the `text` argument will be ignored.\n  - name: html\n    type: string\n    required: true\n    description: If `text` is set, this is not required. HTML for the dropdown. If `html` is provided, the `text` argument will be ignored.\n  - name: hiddenText\n    type: string\n    required: false\n    description: Text for screenreaders only after the dropdown element.\n  - name: classesContainer\n    type: string\n    required: false\n    description: Classes to add to the container div of dropdown and tooltip elements. Defaults to 'hidden lg:block'\n  - name: classesTooltip\n    type: string\n    required: false\n    description: Classes to add to the tooltip content.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the dropdown element.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the dropdown element.\n  - name: contentHtml\n    type: string\n    required: true\n    description: Html content inside the dropdown once opened.\n  - name: items\n    type: array\n    required: true\n    description: An array of navigation item objects in subnav dropdown. If `items` is provided, the `contentHtml` argument will be ignored.\n    params:\n    - name: href\n      type: string\n      required: true\n      description: Item link.\n    - name: target\n      type: string\n      required: false\n      description: The target where the item should link to.\n    - name: text\n      type: string\n      required: true\n      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.\n    - name: html\n      type: string\n      required: true\n      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.\n    - name: id\n      type: string\n      required: false\n      description: Specific id attribute for the checkbox item. If omitted, then idPrefix option will be applied.\n    - name: active\n      type: boolean\n      required: false\n      description: If true, item will be active.\n    - name: disabled\n      type: boolean\n      required: false\n      description: If true, checkbox will be disabled.\n    - name: divider\n      type: boolean\n      required: false\n      description: If true, a divider border will be shown after the item.\n    - name: classes\n      type: string\n      required: false\n      description: Classes to add to the item.\n    - name: attributes\n      type: object\n      required: false\n      description: HTML attributes (for example data attributes) to add to the item.\n- name: navigation\n  type: object\n  required: false\n  description: Options for the navigation main menu.\n   params:\n  - name: classes\n    type: string\n    required: false\n    description: Classes for the navigation menu component. Defaults to 'hidden lg:block'\n  - name: items\n    type: array\n    required: true\n    description: An array of navigation item objects in main menu.\n    params:\n    - name: text\n      type: string\n      required: false\n      description: Text for the navigation item. If `html` is provided, the `text` argument will be ignored.\n    - name: html\n      type: string\n      required: false\n      description: HTML for the navigation item. If `html` is provided, the `text` argument will be ignored.\n    - name: href\n      type: string\n      required: false\n      description: Url of the navigation item anchor. Both `href` and `text` attributes for navigation items need to be provided to create an item.\n    - name: target\n      type: string\n      required: false\n      description: The target where the item should link to.\n    - name: active\n      type: boolean\n      required: false\n      description: Flag to mark the navigation item as active or not.\n    - name: attributes\n      type: object\n      required: false\n      description: HTML attributes (for example data attributes) to add to the navigation item anchor.\n- name: customNavigationHtml\n  type: string\n  required: false\n  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.\n- name: offcanvas\n  type: object\n  required: false\n  description: Options for the offcanvas menu.\n   params:\n  - name: text\n    type: string\n    required: true\n    description: Text for the offcanvas button.\n  - name: textClose\n    type: string\n    required: true\n    description: Text for the offcanvas button for close. Only visible in screenreaders.\n  - name: classes\n    type: string\n    required: false\n    description: Classes for the offcanvas component. Defaults to '-mr-2 flex lg:hidden'.\n- name: containerClasses\n  type: string\n  required: false\n  description: Classes for the container, useful if you want to make the header fixed width.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the header container.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the header container.\n- name: caller\n  type: nunjucks-block\n  required: false\n  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.\n","length":10195}

Mostrar parámetros

Parámetros Nunjucks del componente: "Header"

              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.

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
                <span class="sr-only">Aplicación actual: </span>
                Gestor de expedientes
              </p>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
            <!-- header__navigation -->
            <nav id="header-nav-item" data-module="c-header-navigation" class="hidden lg:block" aria-label="Menú principal">
              <ul class="ml-sm flex flex-wrap items-baseline">
                <li>
                  <a id="header-nav-item-1" href="#1" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 1</a>
                </li>
                <li>
                  <a id="header-nav-item-2" href="#2" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" aria-current="page"><strong class="font-bold">Navigation item 2</strong></a>
                </li>
                <li>
                  <a id="header-nav-item-3" href="#3" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 3</a>
                </li>
                <li>
                  <a id="header-nav-item-4" href="#4" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 4</a>
                </li>
              </ul>
            </nav>
            <!-- /header__navigation -->
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
      }
    ]
  }
}) }}

Aplicación actual: Gestor de expedientes

Gestor de expedientes

Mostrar código

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

HTML

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
                <span class="sr-only">Aplicación actual: </span>
                Gestor de expedientes
              </p>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
            <!-- header__navigation -->
            <nav id="header-nav-item" data-module="c-header-navigation" class="hidden lg:block" aria-label="Menú principal">
              <ul class="ml-sm flex flex-wrap items-baseline">
                <li>
                  <a id="header-nav-item-1" href="#1" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 1</a>
                </li>
                <li>
                  <a id="header-nav-item-2" href="#2" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" aria-current="page"><strong class="font-bold">Navigation item 2</strong></a>
                </li>
                <li>
                  <a id="header-nav-item-3" href="#3" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 3</a>
                </li>
                <li>
                  <a id="header-nav-item-4" href="#4" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 4</a>
                </li>
              </ul>
            </nav>
            <!-- /header__navigation -->
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Con navegación personalizada #

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

Ejemplo: "Con navegación personalizada", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
                <span class="sr-only">Aplicación actual: </span>
                Gestor de expedientes
              </p>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
          <div class='flex flex-wrap flex-1 gap-base'>
            <!-- menu-navigation -->
            <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">
              <ul class="flex flex-wrap gap-base c-menu-navigation__list">
                <li class="relative">
                  <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 max-w-xs align-middle truncate pointer-events-none">Custom Item 1</span>
                    <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>
                  <div class="c-menu-navigation__sub absolute bottom-0 left-0">
                    <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">
                      <li>
                        <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">
                          Subitem 1
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 2
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 3
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="relative">
                  <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 max-w-xs align-middle truncate pointer-events-none">Custom Active Item 2</span>
                    <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>
                  <div class="c-menu-navigation__sub absolute bottom-0 left-0">
                    <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">
                      <li>
                        <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">
                          Subitem 1
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 2
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 3
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="relative">
                  <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 max-w-xs align-middle truncate pointer-events-none">Custom Item 3</span>
                    <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>
                  <div class="c-menu-navigation__sub absolute bottom-0 left-0">
                    <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">
                      <li>
                        <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">
                          Subitem 1
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 2
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 3
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="relative">
                  <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 max-w-xs align-middle truncate pointer-events-none">Item 4 right</span>
                    <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>
                  <div class="c-menu-navigation__sub absolute bottom-0 left-0">
                    <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">
                      <li>
                        <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">
                          Subitem 1
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 2
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 3
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </nav>
            <!-- /menu-navigation -->
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Ejemplo: "Con navegación personalizada", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

Aplicación actual: Gestor de expedientes

Gestor de expedientes

Mostrar código

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

HTML

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
                <span class="sr-only">Aplicación actual: </span>
                Gestor de expedientes
              </p>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
          <div class='flex flex-wrap flex-1 gap-base'>
            <!-- menu-navigation -->
            <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">
              <ul class="flex flex-wrap gap-base c-menu-navigation__list">
                <li class="relative">
                  <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 max-w-xs align-middle truncate pointer-events-none">Custom Item 1</span>
                    <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>
                  <div class="c-menu-navigation__sub absolute bottom-0 left-0">
                    <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">
                      <li>
                        <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">
                          Subitem 1
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 2
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 3
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="relative">
                  <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 max-w-xs align-middle truncate pointer-events-none">Custom Active Item 2</span>
                    <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>
                  <div class="c-menu-navigation__sub absolute bottom-0 left-0">
                    <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">
                      <li>
                        <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">
                          Subitem 1
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 2
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 3
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="relative">
                  <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 max-w-xs align-middle truncate pointer-events-none">Custom Item 3</span>
                    <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>
                  <div class="c-menu-navigation__sub absolute bottom-0 left-0">
                    <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">
                      <li>
                        <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">
                          Subitem 1
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 2
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 3
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="relative">
                  <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 max-w-xs align-middle truncate pointer-events-none">Item 4 right</span>
                    <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>
                  <div class="c-menu-navigation__sub absolute bottom-0 left-0">
                    <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">
                      <li>
                        <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">
                          Subitem 1
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 2
                        </a>
                      </li>
                      <li>
                        <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">
                          Subitem 3
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </nav>
            <!-- /menu-navigation -->
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Con navegación personalizada a la derecha #

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

Ejemplo: "Con navegación personalizada a la derecha", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
                <span class="sr-only">Aplicación actual: </span>
                Gestor de expedientes
              </p>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
          <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>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Ejemplo: "Con navegación personalizada a la derecha", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

Aplicación actual: Gestor de expedientes

Gestor de expedientes

Mostrar código

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

HTML

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
                <span class="sr-only">Aplicación actual: </span>
                Gestor de expedientes
              </p>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
          <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>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Con enlace de skiplink personalizado #

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.

Ejemplo: "Con enlace de skiplink personalizado", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content-center" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline ds-focus" attr-example="custom-data">Saltar al contenido central</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
                <span class="sr-only">Aplicación actual: </span>
                Gestor de expedientes
              </p>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
            <!-- header__navigation -->
            <nav id="header-nav-item" data-module="c-header-navigation" class="hidden lg:block" aria-label="Menú principal">
              <ul class="ml-sm flex flex-wrap items-baseline">
                <li>
                  <a id="header-nav-item-1" href="#1" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 1</a>
                </li>
                <li>
                  <a id="header-nav-item-2" href="#2" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" aria-current="page"><strong class="font-bold">Navigation item 2</strong></a>
                </li>
                <li>
                  <a id="header-nav-item-3" href="#3" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 3</a>
                </li>
                <li>
                  <a id="header-nav-item-4" href="#4" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 4</a>
                </li>
              </ul>
            </nav>
            <!-- /header__navigation -->
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Ejemplo: "Con enlace de skiplink personalizado", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
      }
    ]
  }
}) }}

Aplicación actual: Gestor de expedientes

Gestor de expedientes

Mostrar código

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

HTML

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content-center" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline ds-focus" attr-example="custom-data">Saltar al contenido central</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
                <span class="sr-only">Aplicación actual: </span>
                Gestor de expedientes
              </p>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
            <!-- header__navigation -->
            <nav id="header-nav-item" data-module="c-header-navigation" class="hidden lg:block" aria-label="Menú principal">
              <ul class="ml-sm flex flex-wrap items-baseline">
                <li>
                  <a id="header-nav-item-1" href="#1" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 1</a>
                </li>
                <li>
                  <a id="header-nav-item-2" href="#2" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" aria-current="page"><strong class="font-bold">Navigation item 2</strong></a>
                </li>
                <li>
                  <a id="header-nav-item-3" href="#3" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 3</a>
                </li>
                <li>
                  <a id="header-nav-item-4" href="#4" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 4</a>
                </li>
              </ul>
            </nav>
            <!-- /header__navigation -->
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

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.

Ejemplo: "Logo expandido", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden sm:block" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current sm:hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Ejemplo: "Logo expandido", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/header/_macro.header.njk" import componentHeader %}

{{ componentHeader({
  "homepageUrl": "/",
  "expandedLogo": true
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/header/_macro.header.njk" import componentHeader %}

{{ componentHeader({
  "homepageUrl": "/",
  "expandedLogo": true
}) }}

HTML

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden sm:block" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current sm:hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Con offcanvas #

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

Ejemplo: "Con offcanvas", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
                <span class="sr-only">Aplicación actual: </span>
                Gestor de expedientes
              </p>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
          <!-- header__offcanvasButton -->
          <div class="-mr-2 flex lg:hidden">
            <button id="header-offcanvas-button"
              type="button"
              onclick="openDialog('header-offcanvas', this)"
              tabindex="0"
              class="inline-flex items-center px-3 py-4 text-sm text-black focus:outline-none focus:shadow-outline-black focus:bg-warning-base" aria-haspopup="true">
              <span id="header-offcanvas-button-text" class="inline-block align-middle text-right">Menú</span> <svg role="img" aria-label="Cerrado" class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" 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>
          </div>
          <!-- /header__offcanvasButton -->
        </div>
      </div>
      <!-- header__offcanvas -->
      <div id="header-offcanvas" class="hidden" role="dialog" aria-labelledby="header-offcanvas-button-text" aria-modal="true">
        <div class="left-0 fixed top-0 h-[100dvh] w-offcanvas ml-offcanvas-negative">
          <div class="h-full overflow-auto relative bg-white z-10">
            <div class="text-right p-sm">
              <button
                onclick="closeDialog(this)"
                id="header-offcanvas-button-close"
                type="button"
                class="c-button c-button--sm c-button--transparent m-sm">Cerrar menu <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" class="self-center ml-2" aria-hidden="true">
                  <path fill="currentColor" d="M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z" />
                </svg></button>
            </div>
            <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>
          </div>
        </div>
      </div>
      <!-- /header__offcanvas -->
    </div>
  </div>
</header>
<!-- /header -->

Ejemplo: "Con offcanvas", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% 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  %}

Aplicación actual: Gestor de expedientes

Gestor de expedientes

Mostrar código

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

HTML

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
                <span class="sr-only">Aplicación actual: </span>
                Gestor de expedientes
              </p>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
          <!-- header__offcanvasButton -->
          <div class="-mr-2 flex lg:hidden">
            <button id="header-offcanvas-button"
              type="button"
              onclick="openDialog('header-offcanvas', this)"
              tabindex="0"
              class="inline-flex items-center px-3 py-4 text-sm text-black focus:outline-none focus:shadow-outline-black focus:bg-warning-base" aria-haspopup="true">
              <span id="header-offcanvas-button-text" class="inline-block align-middle text-right">Menú</span> <svg role="img" aria-label="Cerrado" class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" 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>
          </div>
          <!-- /header__offcanvasButton -->
        </div>
      </div>
      <!-- header__offcanvas -->
      <div id="header-offcanvas" class="hidden" role="dialog" aria-labelledby="header-offcanvas-button-text" aria-modal="true">
        <div class="left-0 fixed top-0 h-[100dvh] w-offcanvas ml-offcanvas-negative">
          <div class="h-full overflow-auto relative bg-white z-10">
            <div class="text-right p-sm">
              <button
                onclick="closeDialog(this)"
                id="header-offcanvas-button-close"
                type="button"
                class="c-button c-button--sm c-button--transparent m-sm">Cerrar menu <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" class="self-center ml-2" aria-hidden="true">
                  <path fill="currentColor" d="M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z" />
                </svg></button>
            </div>
            <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>
          </div>
        </div>
      </div>
      <!-- /header__offcanvas -->
    </div>
  </div>
</header>
<!-- /header -->

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.

Ejemplo: "Con offcanvas y mobiletitle", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
                <span class="sr-only">Aplicación actual: </span>
                Gestor de expedientes
              </p>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
          <!-- header__offcanvasButton -->
          <div class="-mr-2 flex lg:hidden">
            <button id="header-offcanvas-button"
              type="button"
              onclick="openDialog('header-offcanvas', this)"
              tabindex="0"
              class="inline-flex items-center px-3 py-4 text-sm text-black focus:outline-none focus:shadow-outline-black focus:bg-warning-base" aria-haspopup="true">
              <span id="header-offcanvas-button-text" class="inline-block align-middle text-right">Menú</span> <svg role="img" aria-label="Cerrado" class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" 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>
          </div>
          <!-- /header__offcanvasButton -->
        </div>
      </div>
      <!-- header__offcanvas -->
      <div id="header-offcanvas" class="hidden" role="dialog" aria-labelledby="header-offcanvas-button-text" aria-modal="true">
        <div class="left-0 fixed top-0 h-[100dvh] w-offcanvas ml-offcanvas-negative">
          <div class="h-full overflow-auto relative bg-white z-10">
            <div class="text-right p-sm">
              <button
                onclick="closeDialog(this)"
                id="header-offcanvas-button-close"
                type="button"
                class="c-button c-button--sm c-button--transparent m-sm">Cerrar menu <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" class="self-center ml-2" aria-hidden="true">
                  <path fill="currentColor" d="M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z" />
                </svg></button>
            </div>
            <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>
          </div>
        </div>
      </div>
      <!-- /header__offcanvas -->
    </div>
  </div>
</header>
<!-- /header -->

Ejemplo: "Con offcanvas y mobiletitle", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% 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  %}

Aplicación actual: Gestor de expedientes

Gestor de expedientes

Mostrar código

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

HTML

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
                <span class="sr-only">Aplicación actual: </span>
                Gestor de expedientes
              </p>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
          <!-- header__offcanvasButton -->
          <div class="-mr-2 flex lg:hidden">
            <button id="header-offcanvas-button"
              type="button"
              onclick="openDialog('header-offcanvas', this)"
              tabindex="0"
              class="inline-flex items-center px-3 py-4 text-sm text-black focus:outline-none focus:shadow-outline-black focus:bg-warning-base" aria-haspopup="true">
              <span id="header-offcanvas-button-text" class="inline-block align-middle text-right">Menú</span> <svg role="img" aria-label="Cerrado" class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" 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>
          </div>
          <!-- /header__offcanvasButton -->
        </div>
      </div>
      <!-- header__offcanvas -->
      <div id="header-offcanvas" class="hidden" role="dialog" aria-labelledby="header-offcanvas-button-text" aria-modal="true">
        <div class="left-0 fixed top-0 h-[100dvh] w-offcanvas ml-offcanvas-negative">
          <div class="h-full overflow-auto relative bg-white z-10">
            <div class="text-right p-sm">
              <button
                onclick="closeDialog(this)"
                id="header-offcanvas-button-close"
                type="button"
                class="c-button c-button--sm c-button--transparent m-sm">Cerrar menu <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" class="self-center ml-2" aria-hidden="true">
                  <path fill="currentColor" d="M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z" />
                </svg></button>
            </div>
            <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>
          </div>
        </div>
      </div>
      <!-- /header__offcanvas -->
    </div>
  </div>
</header>
<!-- /header -->

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.

Ejemplo: "Con subnav text", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
                <span class="sr-only">Aplicación actual: </span>
                Gestor de expedientes
              </p>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Ejemplo: "Con subnav text", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/header/_macro.header.njk" import componentHeader %}

{{ componentHeader({
  "homepageUrl": "/",
  "mobileTitle": {
    "text": "Gestor de expedientes"
  },
  "subnav": {
    "text": "Gestor de expedientes"
  }
}) }}

Aplicación actual: Gestor de expedientes

Gestor de expedientes

Mostrar código

Contenido

Nunjucks macro

{% from "components/header/_macro.header.njk" import componentHeader %}

{{ componentHeader({
  "homepageUrl": "/",
  "mobileTitle": {
    "text": "Gestor de expedientes"
  },
  "subnav": {
    "text": "Gestor de expedientes"
  }
}) }}

HTML

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
                <span class="sr-only">Aplicación actual: </span>
                Gestor de expedientes
              </p>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

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.

Ejemplo: "Con subnav items", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <div class="hidden lg:flex items-center">
                <div class="py-2 relative border-r border-l border-neutral-base">
                  <p class="sr-only">Aplicación actual: </p>
                  <!-- dropdown -->
                  <div data-module="c-dropdown" class=" relative">
                    <button class="c-dropdown c-dropdown--header" data-module="c-dropdown-button" aria-haspopup="true">
                      <span class="inline-flex self-center max-w-xs align-middle truncate">Gestor de expedientes</span>
                      <svg class="inline-block -mr-2  align-middle -my-px" 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>
                    <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
                      <!-- nav -->
                      <nav data-module="c-nav" class="text-sm w-max max-w-64" id="id-subnav-nav" aria-label="Aplicaciones">
                        <ul>
                          <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="header-subnav-nav-item-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="header-subnav-nav-item-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="header-subnav-nav-item-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="header-subnav-nav-item-4">
                              Sistema de comprobación y verificación de documentos por CSV
                            </a>
                          </li>
                        </ul>
                      </nav>
                      <!-- /nav -->
                    </div>
                  </div>
                  <!-- /dropdown -->
                </div>
              </div>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Ejemplo: "Con subnav items", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
      }
    ]
  }
}) }}

Gestor de expedientes

Mostrar código

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

HTML

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <div class="hidden lg:flex items-center">
                <div class="py-2 relative border-r border-l border-neutral-base">
                  <p class="sr-only">Aplicación actual: </p>
                  <!-- dropdown -->
                  <div data-module="c-dropdown" class=" relative">
                    <button class="c-dropdown c-dropdown--header" data-module="c-dropdown-button" aria-haspopup="true">
                      <span class="inline-flex self-center max-w-xs align-middle truncate">Gestor de expedientes</span>
                      <svg class="inline-block -mr-2  align-middle -my-px" 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>
                    <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
                      <!-- nav -->
                      <nav data-module="c-nav" class="text-sm w-max max-w-64" id="id-subnav-nav" aria-label="Aplicaciones">
                        <ul>
                          <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="header-subnav-nav-item-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="header-subnav-nav-item-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="header-subnav-nav-item-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="header-subnav-nav-item-4">
                              Sistema de comprobación y verificación de documentos por CSV
                            </a>
                          </li>
                        </ul>
                      </nav>
                      <!-- /nav -->
                    </div>
                  </div>
                  <!-- /dropdown -->
                </div>
              </div>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

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.

Ejemplo: "Con dropdown", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
          <!-- header__dropdown -->
          <div class="ml-4 flex items-center lg:ml-6">
            <div class="ml-3 relative">
              <div>
                <!-- dropdown -->
                <div data-module="c-dropdown" class="hidden lg:block">
                  <button class="c-dropdown c-dropdown--header" data-module="c-dropdown-button" aria-haspopup="true">
                    <span class="inline-flex self-center max-w-xs align-middle truncate">Marta Pérez</span>
                    <svg class="inline-block -mr-2  align-middle -my-px" 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>
                  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
                    <!-- nav -->
                    <nav data-module="c-nav" class="text-sm w-max max-w-64" id="id-dropdown-nav" aria-label="Menú de usuario">
                      <ul>
                        <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="header-dropdown-nav-item-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="header-dropdown-nav-item-2">
                            Cerrar sesión
                          </a>
                        </li>
                      </ul>
                    </nav>
                    <!-- /nav -->
                  </div>
                </div>
                <!-- /dropdown -->
              </div>
            </div>
          </div>
          <!-- /header__dropdown -->
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Ejemplo: "Con dropdown", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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": "/"
      }
    ]
  }
}) }}

Gestor de expedientes

Mostrar código

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": "/"
      }
    ]
  }
}) }}

HTML

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
          <!-- header__dropdown -->
          <div class="ml-4 flex items-center lg:ml-6">
            <div class="ml-3 relative">
              <div>
                <!-- dropdown -->
                <div data-module="c-dropdown" class="hidden lg:block">
                  <button class="c-dropdown c-dropdown--header" data-module="c-dropdown-button" aria-haspopup="true">
                    <span class="inline-flex self-center max-w-xs align-middle truncate">Marta Pérez</span>
                    <svg class="inline-block -mr-2  align-middle -my-px" 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>
                  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
                    <!-- nav -->
                    <nav data-module="c-nav" class="text-sm w-max max-w-64" id="id-dropdown-nav" aria-label="Menú de usuario">
                      <ul>
                        <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="header-dropdown-nav-item-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="header-dropdown-nav-item-2">
                            Cerrar sesión
                          </a>
                        </li>
                      </ul>
                    </nav>
                    <!-- /nav -->
                  </div>
                </div>
                <!-- /dropdown -->
              </div>
            </div>
          </div>
          <!-- /header__dropdown -->
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

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

Ejemplo: "Con dropdown personalizado", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
          <!-- header__dropdown -->
          <div class="ml-4 flex items-center lg:ml-6">
            <div class="ml-3 relative">
              <div>
                <!-- dropdown -->
                <div data-module="c-dropdown" class="hidden lg:block">
                  <button class="c-dropdown c-dropdown--header" data-module="c-dropdown-button" aria-haspopup="true">
                    <span class="inline-flex self-center max-w-xs align-middle truncate"><span class="block text-right">Marta Pérez <br>(Administración)</span></span>
                    <svg class="inline-block -mr-2  align-middle -my-px" 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>
                  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
                    <!-- nav -->
                    <nav data-module="c-nav" class="text-sm w-max max-w-64" id="id-dropdown-nav" aria-label="Menú de usuario">
                      <ul>
                        <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="header-dropdown-nav-item-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="header-dropdown-nav-item-2">
                            Cerrar sesión
                          </a>
                        </li>
                      </ul>
                    </nav>
                    <!-- /nav -->
                  </div>
                </div>
                <!-- /dropdown -->
              </div>
            </div>
          </div>
          <!-- /header__dropdown -->
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Ejemplo: "Con dropdown personalizado", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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": "/"
      }
    ]
  }
}) }}

Gestor de expedientes

Mostrar código

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": "/"
      }
    ]
  }
}) }}

HTML

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
          <!-- header__dropdown -->
          <div class="ml-4 flex items-center lg:ml-6">
            <div class="ml-3 relative">
              <div>
                <!-- dropdown -->
                <div data-module="c-dropdown" class="hidden lg:block">
                  <button class="c-dropdown c-dropdown--header" data-module="c-dropdown-button" aria-haspopup="true">
                    <span class="inline-flex self-center max-w-xs align-middle truncate"><span class="block text-right">Marta Pérez <br>(Administración)</span></span>
                    <svg class="inline-block -mr-2  align-middle -my-px" 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>
                  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
                    <!-- nav -->
                    <nav data-module="c-nav" class="text-sm w-max max-w-64" id="id-dropdown-nav" aria-label="Menú de usuario">
                      <ul>
                        <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="header-dropdown-nav-item-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="header-dropdown-nav-item-2">
                            Cerrar sesión
                          </a>
                        </li>
                      </ul>
                    </nav>
                    <!-- /nav -->
                  </div>
                </div>
                <!-- /dropdown -->
              </div>
            </div>
          </div>
          <!-- /header__dropdown -->
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

El dropdown puede contener cualquier tipo de información.

Ejemplo: "Con contenido personalizado en dropdown", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
          <!-- header__dropdown -->
          <div class="ml-4 flex items-center lg:ml-6">
            <div class="ml-3 relative">
              <div>
                <!-- dropdown -->
                <div data-module="c-dropdown" class="hidden lg:block">
                  <button class="c-dropdown c-dropdown--header" data-module="c-dropdown-button" aria-haspopup="true" data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Información adicional">
                    <span class="inline-flex self-center max-w-xs align-middle truncate">Marta Pérez</span>
                    <svg class="inline-block -mr-2  align-middle -my-px" 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>
                  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white w-64 max-h-48 overflow-y-auto" data-module="c-dropdown-tooltip">
                    <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>
                  </div>
                </div>
                <!-- /dropdown -->
              </div>
            </div>
          </div>
          <!-- /header__dropdown -->
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Ejemplo: "Con contenido personalizado en dropdown", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

Gestor de expedientes

Mostrar código

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

HTML

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
          </div>
          <!-- header__dropdown -->
          <div class="ml-4 flex items-center lg:ml-6">
            <div class="ml-3 relative">
              <div>
                <!-- dropdown -->
                <div data-module="c-dropdown" class="hidden lg:block">
                  <button class="c-dropdown c-dropdown--header" data-module="c-dropdown-button" aria-haspopup="true" data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Información adicional">
                    <span class="inline-flex self-center max-w-xs align-middle truncate">Marta Pérez</span>
                    <svg class="inline-block -mr-2  align-middle -my-px" 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>
                  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white w-64 max-h-48 overflow-y-auto" data-module="c-dropdown-tooltip">
                    <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>
                  </div>
                </div>
                <!-- /dropdown -->
              </div>
            </div>
          </div>
          <!-- /header__dropdown -->
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Con todo #

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

Ejemplo: "Con todo", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <div class="hidden lg:flex items-center">
                <div class="py-2 relative border-r border-l border-neutral-base">
                  <p class="sr-only">Aplicación actual: </p>
                  <!-- dropdown -->
                  <div data-module="c-dropdown" class=" relative">
                    <button class="c-dropdown c-dropdown--header" data-module="c-dropdown-button" aria-haspopup="true">
                      <span class="inline-flex self-center max-w-xs align-middle truncate">Gestor de expedientes</span>
                      <svg class="inline-block -mr-2  align-middle -my-px" 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>
                    <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
                      <!-- nav -->
                      <nav data-module="c-nav" class="text-sm w-max max-w-64" id="id-subnav-nav" aria-label="Aplicaciones">
                        <ul>
                          <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="header-subnav-nav-item-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="header-subnav-nav-item-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="header-subnav-nav-item-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="header-subnav-nav-item-4">
                              Sistema de comprobación y verificación de documentos por CSV
                            </a>
                          </li>
                        </ul>
                      </nav>
                      <!-- /nav -->
                    </div>
                  </div>
                  <!-- /dropdown -->
                </div>
              </div>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
            <!-- header__navigation -->
            <nav id="header-nav-item" data-module="c-header-navigation" class="hidden lg:block" aria-label="Menú principal">
              <ul class="ml-sm flex flex-wrap items-baseline">
                <li>
                  <a id="header-nav-item-1" href="#1" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 1</a>
                </li>
                <li>
                  <a id="header-nav-item-2" href="#2" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" aria-current="page"><strong class="font-bold">Navigation item 2</strong></a>
                </li>
                <li>
                  <a id="header-nav-item-3" href="#3" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 3</a>
                </li>
              </ul>
            </nav>
            <!-- /header__navigation -->
          </div>
          <!-- header__dropdown -->
          <div class="ml-4 flex items-center lg:ml-6">
            <div class="ml-3 relative">
              <div>
                <!-- dropdown -->
                <div data-module="c-dropdown" class="hidden lg:block">
                  <button class="c-dropdown c-dropdown--header" data-module="c-dropdown-button" aria-haspopup="true">
                    <span class="inline-flex self-center max-w-xs align-middle truncate">Marta Pérez</span>
                    <svg class="inline-block -mr-2  align-middle -my-px" 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>
                  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
                    <!-- nav -->
                    <nav data-module="c-nav" class="text-sm w-max max-w-64" id="id-dropdown-nav" aria-label="Menú de usuario">
                      <ul>
                        <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="header-dropdown-nav-item-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="header-dropdown-nav-item-2">
                            Cerrar sesión
                          </a>
                        </li>
                      </ul>
                    </nav>
                    <!-- /nav -->
                  </div>
                </div>
                <!-- /dropdown -->
              </div>
            </div>
          </div>
          <!-- /header__dropdown -->
          <!-- header__offcanvasButton -->
          <div class="-mr-2 flex lg:hidden">
            <button id="header-offcanvas-button"
              type="button"
              onclick="openDialog('header-offcanvas', this)"
              tabindex="0"
              class="inline-flex items-center px-3 py-4 text-sm text-black focus:outline-none focus:shadow-outline-black focus:bg-warning-base" aria-haspopup="true">
              <span id="header-offcanvas-button-text" class="inline-block align-middle text-right">Menú</span> <svg role="img" aria-label="Cerrado" class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" 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>
          </div>
          <!-- /header__offcanvasButton -->
        </div>
      </div>
      <!-- header__offcanvas -->
      <div id="header-offcanvas" class="hidden" role="dialog" aria-labelledby="header-offcanvas-button-text" aria-modal="true">
        <div class="left-0 fixed top-0 h-[100dvh] w-offcanvas ml-offcanvas-negative">
          <div class="h-full overflow-auto relative bg-white z-10">
            <div class="text-right p-sm">
              <button
                onclick="closeDialog(this)"
                id="header-offcanvas-button-close"
                type="button"
                class="c-button c-button--sm c-button--transparent m-sm">Cerrar menu <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" class="self-center ml-2" aria-hidden="true">
                  <path fill="currentColor" d="M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z" />
                </svg></button>
            </div>
            <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>
          </div>
        </div>
      </div>
      <!-- /header__offcanvas -->
    </div>
  </div>
</header>
<!-- /header -->

Ejemplo: "Con todo", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% 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  %}

Gestor de expedientes

Mostrar código

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

HTML

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
              <!-- header__subnav -->
              <div class="hidden lg:flex items-center">
                <div class="py-2 relative border-r border-l border-neutral-base">
                  <p class="sr-only">Aplicación actual: </p>
                  <!-- dropdown -->
                  <div data-module="c-dropdown" class=" relative">
                    <button class="c-dropdown c-dropdown--header" data-module="c-dropdown-button" aria-haspopup="true">
                      <span class="inline-flex self-center max-w-xs align-middle truncate">Gestor de expedientes</span>
                      <svg class="inline-block -mr-2  align-middle -my-px" 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>
                    <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
                      <!-- nav -->
                      <nav data-module="c-nav" class="text-sm w-max max-w-64" id="id-subnav-nav" aria-label="Aplicaciones">
                        <ul>
                          <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="header-subnav-nav-item-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="header-subnav-nav-item-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="header-subnav-nav-item-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="header-subnav-nav-item-4">
                              Sistema de comprobación y verificación de documentos por CSV
                            </a>
                          </li>
                        </ul>
                      </nav>
                      <!-- /nav -->
                    </div>
                  </div>
                  <!-- /dropdown -->
                </div>
              </div>
              <!-- /header__subnav -->
              <div class="inline-block lg:hidden max-w-full">
                <p class="align-middle py-4 text-sm text-black overflow-hidden">Gestor de expedientes</p>
              </div>
            </div>
            <!-- header__navigation -->
            <nav id="header-nav-item" data-module="c-header-navigation" class="hidden lg:block" aria-label="Menú principal">
              <ul class="ml-sm flex flex-wrap items-baseline">
                <li>
                  <a id="header-nav-item-1" href="#1" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 1</a>
                </li>
                <li>
                  <a id="header-nav-item-2" href="#2" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" aria-current="page"><strong class="font-bold">Navigation item 2</strong></a>
                </li>
                <li>
                  <a id="header-nav-item-3" href="#3" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 3</a>
                </li>
              </ul>
            </nav>
            <!-- /header__navigation -->
          </div>
          <!-- header__dropdown -->
          <div class="ml-4 flex items-center lg:ml-6">
            <div class="ml-3 relative">
              <div>
                <!-- dropdown -->
                <div data-module="c-dropdown" class="hidden lg:block">
                  <button class="c-dropdown c-dropdown--header" data-module="c-dropdown-button" aria-haspopup="true">
                    <span class="inline-flex self-center max-w-xs align-middle truncate">Marta Pérez</span>
                    <svg class="inline-block -mr-2  align-middle -my-px" 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>
                  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
                    <!-- nav -->
                    <nav data-module="c-nav" class="text-sm w-max max-w-64" id="id-dropdown-nav" aria-label="Menú de usuario">
                      <ul>
                        <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="header-dropdown-nav-item-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="header-dropdown-nav-item-2">
                            Cerrar sesión
                          </a>
                        </li>
                      </ul>
                    </nav>
                    <!-- /nav -->
                  </div>
                </div>
                <!-- /dropdown -->
              </div>
            </div>
          </div>
          <!-- /header__dropdown -->
          <!-- header__offcanvasButton -->
          <div class="-mr-2 flex lg:hidden">
            <button id="header-offcanvas-button"
              type="button"
              onclick="openDialog('header-offcanvas', this)"
              tabindex="0"
              class="inline-flex items-center px-3 py-4 text-sm text-black focus:outline-none focus:shadow-outline-black focus:bg-warning-base" aria-haspopup="true">
              <span id="header-offcanvas-button-text" class="inline-block align-middle text-right">Menú</span> <svg role="img" aria-label="Cerrado" class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" 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>
          </div>
          <!-- /header__offcanvasButton -->
        </div>
      </div>
      <!-- header__offcanvas -->
      <div id="header-offcanvas" class="hidden" role="dialog" aria-labelledby="header-offcanvas-button-text" aria-modal="true">
        <div class="left-0 fixed top-0 h-[100dvh] w-offcanvas ml-offcanvas-negative">
          <div class="h-full overflow-auto relative bg-white z-10">
            <div class="text-right p-sm">
              <button
                onclick="closeDialog(this)"
                id="header-offcanvas-button-close"
                type="button"
                class="c-button c-button--sm c-button--transparent m-sm">Cerrar menu <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" class="self-center ml-2" aria-hidden="true">
                  <path fill="currentColor" d="M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z" />
                </svg></button>
            </div>
            <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>
          </div>
        </div>
      </div>
      <!-- /header__offcanvas -->
    </div>
  </div>
</header>
<!-- /header -->

Email template example #

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

Ejemplo: "Email template example", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="https://www.aragon.es/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden sm:block" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current sm:hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Ejemplo: "Email template example", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/header/_macro.header.njk" import componentHeader %}

{{ componentHeader({
  "homepageUrl": "https://www.aragon.es/",
  "expandedLogo": true
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/header/_macro.header.njk" import componentHeader %}

{{ componentHeader({
  "homepageUrl": "https://www.aragon.es/",
  "expandedLogo": true
}) }}

HTML

<!-- header -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center">
              <a href="https://www.aragon.es/" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current  hidden sm:block" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-expanded">
                      <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                    </clipPath>
                    <clipPath id="a-logo-expanded">
                      <path d="M0 0h144v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-expanded)">
                    <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                    <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                      </g>
                    </g>
                    <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                  </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current sm:hidden" aria-label="Ir a la página de inicio de la aplicación" role="img">
                  <defs>
                    <clipPath id="b-logo-mini">
                      <path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z" />
                    </clipPath>
                    <clipPath id="a-logo-mini">
                      <path d="M0 0h32v32H0z" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#a-logo-mini)">
                    <path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z" />
                    <g clip-path="url(#b-logo-mini)" transform="translate(0 .305)">
                      <g fill="#dd171b" fill-rule="evenodd">
                        <path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z" />
                      </g>
                    </g>
                  </g>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header -->

Header

Parámetros Nunjucks del componente: "Header". Versión: 12.0.1

Por defecto #

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Con navegación personalizada #

Ejemplo: "Con navegación personalizada", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Ejemplo: "Con navegación personalizada", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Con navegación personalizada a la derecha #

Ejemplo: "Con navegación personalizada a la derecha", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Ejemplo: "Con navegación personalizada a la derecha", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Con enlace de skiplink personalizado #

Ejemplo: "Con enlace de skiplink personalizado", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Ejemplo: "Con enlace de skiplink personalizado", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Logo expandido #

Ejemplo: "Logo expandido", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Ejemplo: "Logo expandido", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Con offcanvas #

Ejemplo: "Con offcanvas", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Ejemplo: "Con offcanvas", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Con offcanvas y mobiletitle #

Ejemplo: "Con offcanvas y mobiletitle", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Ejemplo: "Con offcanvas y mobiletitle", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Con subnav text #

Ejemplo: "Con subnav text", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Ejemplo: "Con subnav text", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Con subnav items #

Ejemplo: "Con subnav items", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Ejemplo: "Con subnav items", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Con dropdown #

Ejemplo: "Con dropdown", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Ejemplo: "Con dropdown", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Con dropdown personalizado #

Ejemplo: "Con dropdown personalizado", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Ejemplo: "Con dropdown personalizado", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Con contenido personalizado en dropdown #

Ejemplo: "Con contenido personalizado en dropdown", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Ejemplo: "Con contenido personalizado en dropdown", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Con todo #

Ejemplo: "Con todo", de código HTML, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Ejemplo: "Con todo", de código Nunjucks, para maquetar el componente: "Header", versión: 12.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML