desy-html 8.7.0 → 8.8.1

package/docs/index.html

@@ -38,6 +38,18 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.8.8.1</h3>
+  <ul class="text-sm">
+    <li>Fixed a bug in active items in Nav, Menu horizontal and Menu vertical.</li>
+    <li>Improved height in offcanvas in Header and Header advanced.</li>
+  </ul>
+  <h3>v.8.8.0</h3>
+  <ul class="text-sm">
+    <li>Added global function to select items in Listbox.</li>
+    <li>Added global function to open items in Accordion and Accordion history.</li>
+    <li>Fixed a bug in Tabs.</li>
+    <li>Improvements in Docs. Added menu navigation in header advanced in template example.</li>
+  </ul>
   <h3>v.8.7.0</h3>
   <ul class="text-sm">
     <li>Added global function to select items and subitems in Menubar and Menu horizontal.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "8.7.0",
+  "version": "8.8.1",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",

package/src/js/aria/MenuHorizontal.js

@@ -26,15 +26,20 @@ export function MenuHorizontal(aria) {
     };
 
     aria.MenuHorizontal.prototype.wrapActiveElement = function (elementActive) {
-      elementActive.setAttribute('aria-current', 'page');
-      elementActive.classList.add('c-menu-horizontal__active');
-      elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
+      if (!elementActive.getAttribute('aria-current')) {
+        elementActive.setAttribute('aria-current', 'page');
+        elementActive.classList.add('c-menu-horizontal__active');
+        elementActive.innerHTML = `<strong class="font-bold">${elementActive.innerHTML}</strong>`;
+      }
     };
 
     aria.MenuHorizontal.prototype.deactivateElement = function (elementDeactivated) {
       elementDeactivated.removeAttribute('aria-current');
       elementDeactivated.classList.remove('c-menu-horizontal__active');
-      elementDeactivated.innerHTML = elementDeactivated.textContent;
+      if(elementDeactivated.querySelector('strong')) {
+        const replaceStrong = elementDeactivated.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
+        elementDeactivated.innerHTML = `${replaceStrong}`;
+      }
     };
 
     window.activateItemMenuHorizontal = function (menuId, activeItemId) {

package/src/js/aria/MenuVertical.js

@@ -25,13 +25,18 @@ export function MenuVertical(aria) {
     };
 
     aria.MenuVertical.prototype.wrapActiveElement = function (elementActive) {
-      elementActive.setAttribute('aria-current', 'page');
-      elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
+      if (!elementActive.getAttribute('aria-current')) {
+        elementActive.setAttribute('aria-current', 'page');
+        elementActive.innerHTML = `<strong class="font-bold">${elementActive.innerHTML}</strong>`;
+      }
     };
 
     aria.MenuVertical.prototype.deactivateElement = function (elementDeactivated) {
       elementDeactivated.removeAttribute('aria-current');
-      elementDeactivated.innerHTML = elementDeactivated.textContent;
+      if(elementDeactivated.querySelector('strong')) {
+        const replaceStrong = elementDeactivated.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
+        elementDeactivated.innerHTML = `${replaceStrong}`;
+      }
     };
 
     window.activateItemMenuVertical = function (menuId, activeItemId) {

package/src/js/aria/Nav.js

@@ -25,13 +25,18 @@ export function Nav(aria) {
     };
 
     aria.Nav.prototype.wrapActiveElement = function (elementActive) {
-      elementActive.setAttribute('aria-current', 'page');
-      elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
+      if (!elementActive.getAttribute('aria-current')) {
+        elementActive.setAttribute('aria-current', 'page');
+        elementActive.innerHTML = `<strong class="font-bold">${elementActive.innerHTML}</strong>`;
+      }
     };
 
     aria.Nav.prototype.deactivateElement = function (elementDeactivated) {
       elementDeactivated.removeAttribute('aria-current');
-      elementDeactivated.innerHTML = elementDeactivated.textContent;
+      if(elementDeactivated.querySelector('strong')) {
+        const replaceStrong = elementDeactivated.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
+        elementDeactivated.innerHTML = `${replaceStrong}`;
+      }
     };
 
     window.activateItemNav = function (menuId, activeItemId) {

package/src/js/aria/accordion.js

@@ -92,7 +92,6 @@ export function accordion(aria) {
           // If toggling is not allowed, set disabled state on trigger
           if (!allowToggle) {
             target.setAttribute('aria-disabled', 'true');
-            //target.querySelector('span').innerText = '';
             target.querySelector('.c-accordion__show').classList.add('hidden');
             target.querySelector('.c-accordion__hide').classList.add('hidden');
           }
@@ -178,11 +177,56 @@ export function accordion(aria) {
       // If an expanded/ active accordion is found, disable
       if (expanded) {
         expanded.setAttribute('aria-disabled', 'true');
-        //expanded.querySelector('span').innerText = '';
         expanded.querySelector('.c-accordion__show').classList.add('hidden');
         expanded.querySelector('.c-accordion__hide').classList.add('hidden');
       }
     }
 
+    window.activateItemAccordion = function (menuId, activeItemId) {
+      const menu = document.getElementById(menuId);
+      if (menu) {
+        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+        if (activeItem) {
+          activateElement(menuId, activeItemId);
+          return [menu, activeItem]
+        } else {
+          console.log('There is no element with this id in the menu.');
+          return null;
+        }
+      } else {
+        console.log('There is no menu with this id in the document.');
+        return null;
+      }
+    };
+
+    function activateElement(menu, activeItem) {
+      const getAccordion = document.querySelector(`#${menu}`);
+      const allowMultiple = getAccordion.hasAttribute('data-allow-multiple');
+      const allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
+      const selectAllTriggers = document.querySelectorAll(`#${menu} .c-accordion__trigger`);
+      [...selectAllTriggers].forEach((trigger) => {
+        const getPanel = trigger.parentElement.parentElement.querySelector('.c-accordion__panel');
+        const getShowMessage = trigger.querySelector('.c-accordion__show');
+        const getHideMessage = trigger.querySelector('.c-accordion__hide');
+        if (isActive(trigger)) {
+          trigger.setAttribute('aria-expanded', 'true');
+          getPanel.removeAttribute('hidden');
+          getShowMessage.classList.add('hidden');
+          getHideMessage.classList.remove('hidden');
+        } else {
+          trigger.setAttribute('aria-expanded', 'false');
+          getPanel.setAttribute('hidden', 'true');
+          getShowMessage.classList.remove('hidden');
+          getHideMessage.classList.add('hidden');
+        }
+      });
+
+      function isActive(element){
+        const { id } = element;
+        return typeof activeItem === "object" && allowToggle
+          ? activeItem.includes(id)
+          : id === activeItem;
+      }
+    }
   });
 }

package/src/js/aria/listbox.js

@@ -279,10 +279,6 @@ export function listbox(aria) {
         'aria-selected',
         element.getAttribute('aria-selected') === 'true' ? 'false' : 'true'
       );
-      element.setAttribute(
-        'aria-checked',
-        element.getAttribute('aria-checked') === 'true' ? 'false' : 'true'
-      );
 
       if (this.moveButton) {
         if (this.listboxNode.querySelector('[aria-selected="true"]')) {
@@ -308,7 +304,6 @@ export function listbox(aria) {
     }
     if (!this.multiselectable) {
       element.removeAttribute('aria-selected');
-      element.removeAttribute('aria-checked');
     }
     aria.Utils.removeClass(element, 'focused');
   };
@@ -324,7 +319,6 @@ export function listbox(aria) {
     this.defocusItem(document.getElementById(this.activeDescendant));
     if (!this.multiselectable) {
       element.setAttribute('aria-selected', 'true');
-      element.setAttribute('aria-checked', 'true');
     }
     aria.Utils.addClass(element, 'focused');
     this.listboxNode.setAttribute('aria-activedescendant', element.id);
@@ -559,5 +553,72 @@ export function listbox(aria) {
     this.handleFocusChange = focusChangeHandler;
   };
 
+  function activateElement(menuId, activeItem) {
+    const getListBox = document.querySelector(`#${menuId}`);
+    const getTippy = document.querySelector(`#${menuId} [data-tippy-root]`);
+    const getTippyBox = document.querySelector(`#${menuId} .tippy-box`);
+    const getListBoxUl = document.querySelector(`#${menuId} [data-module="c-listbox-list"]`);
+    const getListBoxButton = document.querySelector(`#${menuId} .c-listbox`);
+    const getListBoxButtonText = document.querySelector(`#${menuId} .c-listbox span`);
+    const getMultiSelectable = getListBoxButton.getAttribute('aria-labelledby');
+    const allowMultiple = getMultiSelectable.includes('is-multiselectable-label');
+    const selectAllElements = document.querySelectorAll(`#${menuId} li`);
+
+    getListBoxButton.click();
+    getTippy.style.visibility = 'visible';
+    getTippyBox.setAttribute('data-state','visible');
+    getListBoxButton._tippy.popper._tippy.show();
+    getListBoxUl.focus();
+
+    [...selectAllElements].forEach((element) => {
+      if (isActive(element, activeItem)) {
+        element.setAttribute('aria-selected', 'true');
+        if(!allowMultiple && getListBoxButton.dataset.change){
+          getListBoxButtonText.innerHTML = element.textContent;
+        }
+      } else {
+        element.setAttribute('aria-selected', 'false');
+      }
+    });
+
+    getTippy.style.visibility = 'hidden';
+    getTippyBox.setAttribute('data-state','hidden');
+
+    getListBoxUl.dispatchEvent(new KeyboardEvent("keydown", {
+      key: "Escape",
+      keyCode: 27,
+      code: "Escape",
+      which: 27
+    }));
+
+    getListBoxButton._tippy.popper._tippy.hide();
+    getListBoxButton.classList.remove('open');
+
+    function isActive(element, activeItem) {
+      const { id } = element;
+      return typeof activeItem === "object" && allowMultiple
+        ? activeItem.includes(id)
+        : id === activeItem;
+    }
+  };
+
+  window.activateItemListBox = function (menuId, activeItemId) {
+    const menu = document.getElementById(menuId);
+    if (menu) {
+      const getListBoxButton = document.querySelector(`#${menuId} .c-listbox`);
+      getListBoxButton.click();
+      const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+      if (activeItem) {
+        activateElement(menuId, activeItemId);
+        return [menu, activeItem]
+      } else {
+        console.log('There is no element with this id in the menu.');
+        return null;
+      }
+    } else {
+      console.log('There is no menu with this id in the document.');
+      return null;
+    }
+  };
   return aria;
-}
+}

package/src/js/aria/tabs.js

@@ -281,13 +281,18 @@ export function tabs(aria) {
       //Add active class to current tab
       element.classList.add("c-tabs__link--is-active");
       element.setAttribute('role', 'tab');
-      element.innerHTML = `<strong class="font-bold">${element.innerHTML}</strong>`;
+      if(element.querySelector('strong') === null) {
+        element.innerHTML = `<strong class="font-bold">${element.innerHTML}</strong>` ;
+      }
     }
 
     function removeActiveClass(element) {
       element.classList.remove("c-tabs__link--is-active");
       element.removeAttribute('role');
-      element.innerHTML = element.innerHTML;
+      if(element.querySelector('strong')) {
+        const replaceStrong = element.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
+        element.innerHTML = `${replaceStrong}`;
+      }
     }
 
     window.activateItemTabs = function (menuId, tabItemId) {
@@ -296,16 +301,13 @@ export function tabs(aria) {
         const activeItemTab = document.querySelector(`#${menuId} #${tabItemId}`);
         const activeItemPanel = document.querySelector(`[aria-labelledby="${tabItemId}"]`);
         if (activeItemTab) {
-          document.querySelectorAll('.c-tabs__link').forEach((tab) => {
-            tab.classList.remove("c-tabs__link--is-active");
-            tab.innerHTML = tab.innerHTML;
+          document.querySelectorAll(`#${menuId} .c-tabs__link`).forEach((tab) => {
+            removeActiveClass(tab)
           })
 
-          activeItemTab.classList.add("c-tabs__link--is-active");
-          activeItemTab.setAttribute('role', 'tab');
-          activeItemTab.innerHTML = `<strong class="font-bold">${activeItemTab.innerHTML}</strong>`;
+          addActiveClass(activeItemTab)
 
-          document.querySelectorAll('.c-tabs__panel').forEach((panel) => {
+          document.querySelectorAll(`#${menuId} .c-tabs__panel`).forEach((panel) => {
             panel.setAttribute('hidden', 'hidden')
           })
 

package/src/js/desy-html.js

@@ -126,17 +126,36 @@ export function dropdownComponent(aria) {
 export function listboxComponent(aria) {
   listbox(aria);
   const modules = document.querySelectorAll('[data-module]');
+  let activeButton;
   for (const item in modules) if (modules.hasOwnProperty(item)) {
     const moduleValue = modules[item].getAttribute('data-module');
 
-
     if (moduleValue == 'c-listbox'){
       const buttonListbox = modules[item].querySelector('[data-module = "c-listbox-button"]');
       const tooltip = modules[item].querySelector('[data-module = "c-listbox-tooltip"]');
       const list = modules[item].querySelector('[data-module = "c-listbox-list"]');
-
       if(buttonListbox && tooltip) {
         const listbox = new aria.Listbox(list);
+        const hideOnClick = {
+          name: 'hideOnClick',
+          defaultValue: true,
+          fn(instance) {
+            return {
+              onCreate() {
+                buttonListbox.addEventListener("click", (event) => {
+                  if(!buttonListbox.classList.contains('open')){
+                    instance.show();
+                    list.focus()
+                    buttonListbox.classList.add('open');
+                  } else {
+                    list.blur();
+                    instance.hide();
+                  }
+                });
+              },
+            };
+          },
+        };
         const hideOnPopperBlur = {
           /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
           name: 'hideOnPopperBlur',
@@ -185,34 +204,40 @@ export function listboxComponent(aria) {
           inlinePositioning: true,
           content: tooltip,
           allowHTML: true, // Make sure you are sanitizing any user data if rendering HTML to prevent XSS attacks.
-          trigger: 'click',
-          hideOnClick: true,
+          trigger: 'manual',
           interactive: true,
           arrow: false,
           offset: [0, -10],
           theme: '',
-          plugins: [hideOnEscOrEnter,hideOnPopperBlur],
+          plugins: [hideOnEscOrEnter,hideOnPopperBlur, hideOnClick],
           role: false,
           aria: {
             content: 'auto'
           },
-          onShown(instance) {
-            list.focus();
+          onMount(instance) {
             if (list.querySelectorAll('[aria-selected="true"]')[0]) {
               listbox.focusItem(list.querySelectorAll('[aria-selected="true"]')[0]);
             }
           },
-          onHidden(instance) {
-            buttonListbox.focus();
+          onHidden(instance){
+            buttonListbox.classList.remove('open');
           }
         });
 
         listbox.setHandleFocusChange(function(evt){
-          if ((!list.hasAttribute('aria-multiselectable'))&&(buttonListbox.getAttribute('data-change')=='change')){
+          if ((!list.hasAttribute('aria-multiselectable')) && (buttonListbox.getAttribute('data-change')=='change')){
             buttonListbox.firstElementChild.innerHTML = evt.innerHTML;
           }
         });
 
+        const getMultiSelectable = buttonListbox.getAttribute('aria-labelledby');
+        const allowMultiple = getMultiSelectable.includes('is-multiselectable-label');
+
+        if(!allowMultiple) {
+          list.addEventListener("click", (event) => {
+            buttonListbox.click();
+          })
+        }
       }
     }
   }

package/src/templates/components/accordion/_examples.accordion.njk

@@ -70,7 +70,7 @@
   },
   {
     "name": "Con un item abierto",
-    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>.',
+    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemId)</code> para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion", "with-one-item-opened-example-1-title")</code> para cerrar el item actual y abrir el primer item de este ejemplo.',
     "data": {
       "idPrefix": "with-one-item-opened-example",
       "headingLevel": 3,
@@ -89,12 +89,15 @@
           "headerText": "Item de acordeón 3",
           "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
-      ]
+      ],
+      "attributes": {
+        "id": "accordion"
+      }
     }
   },
   {
     "name": "Con 2 items abiertos",
-    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>.',
+    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemsIds)</code> para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion-multiple", ["with-2-items-opened-example-2-title", "with-2-items-opened-example-3-title"])</code>.',
     "data": {
       "idPrefix": "with-2-items-opened-example",
       "headingLevel": 3,
@@ -114,7 +117,10 @@
           "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
           "open": true
         }
-      ]
+      ],
+      "attributes": {
+        "id": "accordion-multiple"
+      }
     }
   },
   {

package/src/templates/components/accordion-history/_examples.accordion-history.njk

@@ -106,7 +106,7 @@
   },
   {
     "name": "Con un item abierto",
-    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>.',
+    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemId)</code> para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion-history", "with-one-item-opened-example-1-title")</code> para cerrar el item actual y abrir el primer item de este ejemplo.',
     "data": {
       "idPrefix": "with-one-item-opened-example",
       "headingLevel": 3,
@@ -125,12 +125,15 @@
           "headerText": "Item de acordeón 3",
           "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
-      ]
+      ],
+      "attributes": {
+        "id": "accordion-history"
+      }
     }
   },
   {
     "name": "Con 2 items abiertos",
-    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>.',
+    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemsIds)</code> para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion-history-multiple", ["with-2-items-opened-example-2-title", "with-2-items-opened-example-3-title"])</code>.',
     "data": {
       "idPrefix": "with-2-items-opened-example",
       "headingLevel": 3,
@@ -150,7 +153,10 @@
           "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
           "open": true
         }
-      ]
+      ],
+      "attributes": {
+        "id": "accordion-history-multiple"
+      }
     }
   },
   {
@@ -380,4 +386,4 @@
       ]
     }
   }
-] %}
+] %}

package/src/templates/components/header/_template.header.header__offcanvas.njk

@@ -1,6 +1,6 @@
 <!-- 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-screen w-offcanvas ml-offcanvas-negative">
+  <div class="left-0 fixed top-0 h-screen h-[100dvh] w-offcanvas ml-offcanvas-negative">
     <div class="h-full overflow-auto relative h-screen bg-white z-10">
       <div class="text-right p-sm">
         <button

package/src/templates/components/listbox/_examples.listbox.njk

@@ -444,6 +444,7 @@
     },
     {
       "name": "con item activo",
+      "description": 'Podemos seleccionar inicialmente un item si le añadimos el parámetro <code>"active": true</code>. También puedes usar con javascript la función global <code>activateItemListBox(elementMenu, activeItemId)</code> para seleccionar un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemListBox("listbox", "with-active-item-listbox-item-2")</code> para seleccionar el segundo item de este ejemplo.',
       "data": {
         "id": "with-active-item",
         "text": "con item activo",
@@ -472,12 +473,15 @@
             "href": "#",
             "text": "Opción 5"
           }
-        ]
+        ],
+        "attributes": {
+          "id": "listbox"
+        }
       }
     },
     {
       "name": "Permite selecciones múltiples",
-      "description": 'Usa el parámetro <code>"isMultiselectable": true</code>.',
+      "description": 'Usa el parámetro <code>"isMultiselectable": true</code>. En este caso al seleccionar un item el elemento no se cerrará. También puedes usar con javascript la función global <code>activateItemListBox(elementMenu, activeItemId)</code> para seleccionar varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemListBox("listbox-multiple", ["is-multiselectable-listbox-item-2", "is-multiselectable-listbox-item-3"])</code> para seleccionar el segundo y el tercer item de este ejemplo.',
       "data": {
         "id": "is-multiselectable",
         "isMultiselectable": true,
@@ -506,7 +510,10 @@
             "href": "#",
             "text": "Opción 5"
           }
-        ]
+        ],
+        "attributes": {
+          "id": "listbox-multiple"
+        }
       }
     },
     {
@@ -609,4 +616,4 @@
         ]
       }
     }
-] %}
+] %}

package/src/templates/components/listbox/_template.listbox.njk

@@ -66,7 +66,7 @@ treat it as an interactive element - without this it will be
 {% endset -%}
 
 <!-- listbox -->
-<div data-module="c-listbox" class="{% if params.classesContainer %}{{ params.classesContainer }}{% else %} relative{% endif %}">
+<div data-module="c-listbox" class="{% if params.classesContainer %}{{ params.classesContainer }}{% else %} relative{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {% if params.label  %}
   <div id="{{ params.id }}-label" class="mb-sm {%- if params.label.classes %} {{ params.label.classes }}{% endif %}">
     {% if params.label.html %}
@@ -87,4 +87,4 @@ treat it as an interactive element - without this it will be
     </ul>
   </div>
 </div>
-<!-- /listbox -->
+<!-- /listbox -->

package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk

@@ -163,6 +163,29 @@
       }
     }
   },
+  {
+    "name": "con iconos en items",
+    "data": {
+      "items": [
+        {
+          "href": "#",
+          "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Archivo" focusable="false" role="img"><g id="new-file--empty-common-file-content"><path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path></g></svg> Opción 1'
+        },
+        {
+          "href": "#",
+          "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"  width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Link" focusable="false" role="img"><g id="link-chain--create-hyperlink-link-make-unlink-connection-chain"><path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path></g></svg> Opción 2'
+        },
+        {
+          "href": "#",
+          "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Solicitud" focusable="false" role="img"><g id="clipboard-text--edition-form-task-checklist-edit-clipboard"><path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path></g></svg> Opción 3'
+        }
+      ],
+      "attributes": {
+        "id": "mi-menu-icons",
+        "aria-label": "Menu horizontal"
+      }
+    }
+  },
   {
     "name": "con clases aplicadas: tabs en móvil",
     "description": 'Clases modificadoras aplicadas: <code>.c-menu-horizontal--tabs-mobile</code> y <code>.c-menu-horizontal--scroll</code>',

package/src/templates/components/menu-vertical/_examples.menu-vertical.njk

@@ -446,6 +446,30 @@
       }
     }
   },
+  {
+    "name": "con iconos en items",
+    "data": {
+      "idPrefix": "with-icons",
+      "items": [
+        {
+          "href": "#",
+          "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Archivo" focusable="false" role="img"><g id="new-file--empty-common-file-content"><path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path></g></svg> Opción 1'
+        },
+        {
+          "href": "#",
+          "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"  width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Link" focusable="false" role="img"><g id="link-chain--create-hyperlink-link-make-unlink-connection-chain"><path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path></g></svg> Opción 2'
+        },
+        {
+          "href": "#",
+          "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Solicitud" focusable="false" role="img"><g id="clipboard-text--edition-form-task-checklist-edit-clipboard"><path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path></g></svg> Opción 3'
+        }
+      ],
+      "attributes": {
+        "id": "mi-menu-icons",
+        "aria-label": "Menu vertical"
+      }
+    }
+  },
   {
     "name": "con idPrefix",
     "description": 'Mostrar código para ver el <code>idPrefix</code> aplicado',

package/src/templates/components/nav/_examples.nav.njk

@@ -212,6 +212,30 @@
       }
     }
   },
+  {
+    "name": "con iconos en items",
+    "data": {
+      "idPrefix": "with-icons",
+      "items": [
+        {
+          "href": "#",
+          "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Archivo" focusable="false" role="img"><g id="new-file--empty-common-file-content"><path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path></g></svg> Opción 1'
+        },
+        {
+          "href": "#",
+          "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"  width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Link" focusable="false" role="img"><g id="link-chain--create-hyperlink-link-make-unlink-connection-chain"><path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path></g></svg> Opción 2'
+        },
+        {
+          "href": "#",
+          "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Solicitud" focusable="false" role="img"><g id="clipboard-text--edition-form-task-checklist-edit-clipboard"><path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path></g></svg> Opción 3'
+        }
+      ],
+      "attributes": {
+        "id": "mi-menu-icons",
+        "aria-label": "Navegación local"
+      }
+    }
+  },
   {
     "name": "con idPrefix",
     "description": 'Mostrar código para ver el <code>idPrefix</code> aplicado.',

package/src/templates/components/tabs/_examples.tabs.njk

@@ -366,7 +366,10 @@
             "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
           }
         }
-      ]
+      ],
+      "attributes": {
+        "id": "tabs-active-icons"
+      }
     }
   },
   {

package/src/templates/pages/_template.with-header-advanced.njk

@@ -1,6 +1,8 @@
 {% include "pages/_page.head.njk" %}
 
 {% from "components/header-advanced/_macro.header-advanced.njk" import componentHeaderAdvanced %}
+{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
+{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}
 {% from "components/nav/_macro.nav.njk" import componentNav %}
 {% from "components/details/_macro.details.njk" import componentDetails %}
 
@@ -13,6 +15,132 @@
   <!-- /pageSpinnerBlock -->
   <!-- headerBlock -->
   {% block headerBlock %}
+    {% set menuCustom %}
+      <div class="hidden lg:flex lg:flex-wrap lg:flex-1 lg:gap-base">
+        {{ componentMenuNavigation({
+          "idPrefix": "header-custom-nav",
+          "classes": "bg-neutral-lighter c-menu-navigation--last-right w-full",
+          "items": [
+            {
+              "text": "Inicio",
+              "active": true,
+              "id": "header-custom-nav-item-0",
+              "classes": "c-menu-navigation__button--header -mr-base",
+              "href": "#"
+            },
+            {
+              "text": "Gestiones",
+              "id": "header-custom-nav-item-1",
+              "classes": "c-menu-navigation__button--header -mr-base",
+              "sub": {
+                "items": [
+                  {
+                    "href": "#",
+                    "text": "Subitem 1"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 2"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 3"
+                  }
+                ],
+                "attributes": {
+                  "aria-labelledby": "header-custom-nav-item-1"
+                }
+              }
+            },
+            {
+              "text": "Centros sanitarios",
+              "id": "header-custom-nav-item-2",
+              "classes": "c-menu-navigation__button--header -mr-base",
+              "sub": {
+                "items": [
+                  {
+                    "href": "#",
+                    "text": "Subitem 1"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 2",
+                    "active": true
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 3"
+                  }
+                ],
+                "attributes": {
+                  "aria-labelledby": "header-custom-nav-item-2"
+                }
+              }
+            },
+            {
+              "text": "Cuida tu salud",
+              "id": "header-custom-nav-item-3",
+              "classes": "c-menu-navigation__button--header -mr-base",
+              "sub": {
+                "items": [
+                  {
+                    "href": "#",
+                    "text": "Subitem 1"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 2"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 3"
+                  }
+                ],
+                "attributes": {
+                  "aria-labelledby": "header-custom-nav-item-3"
+                }
+              }
+            },
+            {
+              "text": "Participación",
+              "id": "header-custom-nav-item-4",
+              "classes": "c-menu-navigation__button--header -mr-base",
+              "href": "#"
+            },
+            {
+              "text": "Contacto",
+              "id": "header-custom-nav-item-5",
+              "classes": "c-menu-navigation__button--header -mr-base",
+              "href": "#"
+            },
+            {
+              "text": "Hola, Marta",
+              "id": "header-custom-nav-item-6",
+              "classes": "c-menu-navigation__button--header",
+              "sub": {
+                "items": [
+                  {
+                    "href": "#",
+                    "text": "Perfil"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Cerrar sesión"
+                  }
+                ],
+                "attributes": {
+                  "aria-labelledby": "header-custom-nav-item-6"
+                }
+              }
+            }
+          ],
+          "attributes": {
+            "aria-label": "Menu de navegación principal",
+            "id": "mi-menu-header"
+          }
+        }) }}
+      </div>
+    {% endset %}
     {% call componentHeaderAdvanced({
       "skipLink": {
         "href": "#content"
@@ -21,35 +149,7 @@
         "homepageUrl": "index.html",
         "text": "Portal de Salud"
       },
-      "navigation": {
-        "items": [
-          {
-            "href": "#",
-            "text": "Inicio",
-            "active": true
-          },
-          {
-            "href": "#",
-            "text": "Gestiones"
-          },
-          {
-            "href": "#",
-            "text": "Centros sanitarios"
-          },
-          {
-            "href": "#",
-            "text": "Cuida tu salud"
-          },
-          {
-            "href": "#",
-            "text": "Participación"
-          },
-          {
-            "href": "#",
-            "text": "Contacto"
-          }
-        ]
-      },
+      "customNavigationHtml": menuCustom | safe,
       "offcanvas": {
         "text": "Menú",
         "textClose": "Cerrar menú"
@@ -59,39 +159,120 @@
       <nav class="w-full p-2" aria-labelledby="menu-movil-title">
         <h2 id="menu-movil-title" class="sr-only">Menú principal</h2>
         <h3 class="p-base text-base font-bold">Portal de Salud</h3>
-        {{ componentNav({
-          "idPrefix": "nav-mobile-pages",
-          "hasNav": false,
+        {{ componentMenuVertical({
+          "idPrefix": "menu-mobile",
           "items": [
             {
               "href": "#",
               "text": "Inicio",
+              "id": "menu-mobile-item-0",
               "active": true
             },
             {
               "href": "#",
-              "text": "Gestiones"
+              "text": "Gestiones",
+              "id": "menu-mobile-item-1",
+              "sub": {
+                "items": [
+                  {
+                    "href": "#",
+                    "text": "Subitem 1"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 2"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 3"
+                  }
+                ],
+                "attributes": {
+                  "aria-labelledby": "menu-mobile-item-1"
+                }
+              }
             },
             {
               "href": "#",
-              "text": "Centros sanitarios"
+              "text": "Centros sanitarios",
+              "id": "menu-mobile-item-2",
+              "sub": {
+                "items": [
+                  {
+                    "href": "#",
+                    "text": "Subitem 1"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 2"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 3"
+                  }
+                ],
+                "attributes": {
+                  "aria-labelledby": "menu-mobile-item-2"
+                }
+              }
             },
             {
               "href": "#",
-              "text": "Cuida tu salud"
+              "text": "Cuida tu salud",
+              "id": "menu-mobile-item-3",
+              "sub": {
+                "items": [
+                  {
+                    "href": "#",
+                    "text": "Subitem 1"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 2"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 3"
+                  }
+                ],
+                "attributes": {
+                  "aria-labelledby": "menu-mobile-item-3"
+                }
+              }
             },
             {
               "href": "#",
-              "text": "Participación"
+              "text": "Participación",
+              "id": "menu-mobile-item-4"
             },
             {
               "href": "#",
-              "text": "Contacto"
+              "text": "Contacto",
+              "id": "menu-mobile-item-5"
             }
           ],
           "attributes": {
             "aria-label": "Lista de páginas"
           }
+        }) }}
+        <hr class="mt-lg mb-base border-b border-neutral-base">
+        <h3 class="p-base text-base font-bold">Usuario/a: Ana Pérez</h3>
+        {{ componentNav({
+          "idPrefix": "nav-mobile-user",
+          "hasNav": false,
+          "items": [
+            {
+              "href": "#",
+              "text": "Perfil"
+            },
+            {
+              "href": "#",
+              "text": "Cerrar sesión"
+            }
+          ],
+          "attributes": {
+            "aria-label": "Lista de acciones de usuario"
+          }
         })  }}
       </nav>
     {% endcall %}