desy-html 10.2.2 → 11.0.1

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

@@ -1,1623 +1,1623 @@
-{% set exampleComponent = "menubar" %}
-{% set examples =  [
-  {
-    "name": "Por defecto",
-    "description": "El menubar se usa para interactuar con él y realizar cambios en otra parte de la página, no como menú de navegación. Si necesitas una navegación con enlaces, debes usas el componente Menu navigation en vez de este Menubar. Este ejemplo muestra parámetros mixtos.",
-    "data": {
-      "id": "with-all-parent-items-1",
-      "idPrefix": "parent-example",
-      "ariaLabel":"Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "menuitems-example-item-1-1",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-example-item-2-1",
-          "classes": "mb-base mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "menuitems-example-item-3-1",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "menuitems-example-item-4-1",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "menuitems-example-item-6-1",
-          "classes": "c-menubar__button--transparent mb-base mr-base",
-          "href": "#"
-        }
-      ]
-    }
-  },
-  {
-    "name": "Tiene selección en items padres",
-    "description": "Cuando se ha seleccionado algún elemento hijo, si se desea, el padre se puede mostrar con color usando la clase <code>.c-menubar__button--has-selection</code>.",
-    "data": {
-      "id": "with-all-parent-items-2",
-      "idPrefix": "parent-example",
-      "ariaLabel":"Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "menuitems-example-item-1-2",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-example-item-2-2",
-          "classes": "c-menubar__button--has-selection mb-base mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "checked": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "menuitems-example-item-3-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--has-selection mb-base mr-base"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "menuitems-example-item-4-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--has-selection mb-base mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "menuitems-example-item-6-2",
-          "classes": "c-menubar__button--transparent mb-base mr-base",
-          "href": "#"
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con sub-item activo",
-    "description": "Cuando se ha seleccionado algún elemento hijo, el padre se muestra con color. Añade <code>active: true</code> a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuBarAction(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item o varios sub-items de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuBarAction('mi-menubar', 'sub-sub-menuitems-example-item-3-2-1-1')</code> para desactivar el sub-item actual y activar el primer sub-item del tercer menú de este ejemplo. Si quieres activar varios sub-items, abre la consola del navegador y escribe <code>activateItemMenuBarAction('mi-menubar', ['sub-menuitems-example-item-2-2-1', 'sub-menuitems-example-item-2-2-2', 'sub-menuitems-example-item-2-2-3'])</code>.",
-    "data": {
-      "id": "mi-menubar",
-      "idPrefix": "parent-example",
-      "ariaLabel":"Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "menuitems-example-item-1-2",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-example-item-2-2",
-          "classes": "mb-base mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "active": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "menuitems-example-item-3-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "menuitems-example-item-4-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "menuitems-example-item-6-2",
-          "classes": "c-menubar__button--transparent mb-base mr-base",
-          "href": "#"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con un item padre deshabilitado",
-    "data": {
-      "id": "with-disabled",
-      "idPrefix": "disabled-example",
-      "ariaLabel":"Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "menuitems-disabled-example-item-1-2",
-          "disabled": true,
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-disabled-example-item-2-2",
-          "classes": "mb-base mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "checked": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "menuitems-disabled-example-item-3-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "menuitems-disabled-example-item-4-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "menuitems-disabled-example-item-6-2",
-          "classes": "c-menubar__button--transparent mb-base mr-base",
-          "href": "#"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con un item padre activo",
-    "data": {
-      "id": "with-active",
-      "idPrefix": "active-example",
-      "ariaLabel":"Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "menuitems-active-example-item-1-2",
-          "active": true,
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-active-example-item-2-2",
-          "classes": "mb-base mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "checked": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "menuitems-active-example-item-3-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "menuitems-active-example-item-4-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "menuitems-active-example-item-6-2",
-          "classes": "c-menubar__button--transparent mb-base mr-base",
-          "href": "#"
-        }
-      ]
-    }
-  },
-  {
-    "name": "peque",
-    "description": "Usando clases modificadoras en los items.",
-    "data": {
-      "id": "small-items",
-      "idPrefix": "small-example",
-      "ariaLabel":"Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "small-example-item-1",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "c-menubar__button--sm mb-sm mr-sm"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "small-example-item-2",
-          "classes": "c-menubar__button--sm mb-sm mr-sm",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "checked": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "small-example-item-3",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--sm mb-sm mr-sm"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "small-example-item-4",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--sm mb-sm mr-sm"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "small-example-item-6",
-          "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
-          "href": "#"
-        }
-      ]
-    }
-  },
-  {
-    "name": "transparente",
-    "description": "Usando clases modificadoras en los items.",
-    "data": {
-      "id": "transparent-items",
-      "idPrefix": "transparent-example",
-      "ariaLabel":"Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "transparent-example-item-1",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "c-menubar__button--transparent mb-sm mr-sm"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "transparent-example-item-2",
-          "classes": "c-menubar__button--transparent mb-sm mr-sm",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "checked": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "transparent-example-item-3",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--transparent mb-sm mr-sm"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "transparent-example-item-4",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--transparent mb-sm mr-sm"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "transparent-example-item-6",
-          "classes": "c-menubar__button--transparent mb-sm mr-sm",
-          "href": "#"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con estilos de cabecera",
-    "description": "En casos especiales, una cabecera fija con un Menubar puede ser útil. Si necesitas una navegación con enlaces, debes usas el componente Menu navigation en vez de este Menubar.",
-    "data": {
-      "id": "header-items",
-      "idPrefix": "header-example",
-      "ariaLabel":"Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "header-example-item-1",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "c-menubar__button--header mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "header-example-item-2",
-          "classes": "c-menubar__button--header mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "checked": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "header-example-item-3",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--header mr-base"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "header-example-item-4",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--header mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "header-example-item-6",
-          "classes": "c-menubar__button--header mr-base",
-          "href": "#"
-        }
-      ],
-      "classes": "bg-neutral-lighter"
-    }
-  },
-  {
-    "name": "Ejemplo de filtros",
-    "description": 'Usa el Menubar sobre una lista de items para filtrarlos u ordenarlos. Usa la clase modificadora <code>.c-menubar--last-right</code> para posicionar el último item a la derecha en breakpoints grandes.',
-    "data": {
-      "id": "filter-items",
-      "idPrefix": "filter-example",
-      "ariaLabel":"Menubar descrición",
-      "items": [
-        {
-          "text": "Estados y trámites",
-          "ariaLabel": "Estados y trámites",
-          "id": "filter-example-item-2",
-          "classes": "c-menubar__button--sm mb-sm mr-sm",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Filtrar",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Filtrar servicios"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Filtrar procesos y convocatorias"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "none",
-                "html": '<span class="inline-block px-base py-sm text-neutral-dark focus:outline-none">Estados</span>'
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estados",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Borrador"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Borrador rechazado"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "En validación"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Publicado"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Con cambios"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Dados de baja"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "none",
-                "html": '<span class="inline-block px-base py-sm text-neutral-dark focus:outline-none">Plazos (sólo aplican a convocatorias y procesos)</span>'
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Plazos (sólo aplican a convocatorias y procesos)",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Plazo permanente"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Plazo temporal indefinido"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Plazo temporal abierto"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Plazo temporal finalizado"
-                  }
-                ]
-              }
-            ]
-          }
-        },
-        {
-          "text": "Tipología",
-          "ariaLabel": "Tipología",
-          "id": "filter-example-item-3",
-          "classes": "c-menubar__button--sm mb-sm mr-sm",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Filtrar por procedimiento",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Procedimiento"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Servicio sin tramitación de procedimiento"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Filtrar por interno/externo",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Interno"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Externo"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Filtrar por común/específico",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Común, horizontal"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Específico, sectorial"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Específico de uso común"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Filtrar por tipo de inicio",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Inicio de oficio"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Inicio a instancia"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Con convocatorias"
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Tramitación íntegra digital"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Eliminar filtros",
-          "ariaLabel": "Eliminar filtros",
-          "id": "filter-example-item-6",
-          "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
-          "href": "#"
-        },
-        {
-          "text": "Orden: Actividad reciente",
-          "ariaLabel": "Orden: Actividad reciente",
-          "id": "filter-example-item-4",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tipos de ordenación",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Actividad reciente",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Publicación reciente"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Creación reciente"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "html": 'Número de servicio (de mayor a menor)'
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--sm mb-sm"
-        }
-      ],
-      "classes": "c-menubar--last-right"
-    }
-  },
-  {
-    "name": "con label",
-    "description": 'Con label que explica que este menú actúa sobre otro elemento. Puedes usar las clases <code>.sr-only</code> para que se vea sólo en lectores de pantalla.',
-    "data": {
-      "id": "with-label-items",
-      "idPrefix": "label-example",
-      "ariaLabel":"Menubar descrición",
-      "label": {
-        "text": "Esto es un label"
-      },
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "menuitems-example-item-1-3",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-example-item-2-3",
-          "classes": "mb-base mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "menuitems-example-item-3-3",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "menuitems-example-item-4-3",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "menuitems-example-item-6-3",
-          "classes": "c-menubar__button--transparent mb-base mr-base",
-          "href": "#"
-        }
-      ]
-    }
-  }
-] %}
+{% set exampleComponent = "menubar" %}
+{% set examples =  [
+  {
+    "name": "Por defecto",
+    "description": "El menubar se usa para interactuar con él y realizar cambios en otra parte de la página, no como menú de navegación. Si necesitas una navegación con enlaces, debes usas el componente Menu navigation en vez de este Menubar. Este ejemplo muestra parámetros mixtos.",
+    "data": {
+      "id": "with-all-parent-items-1",
+      "idPrefix": "parent-example",
+      "ariaLabel":"Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-example-item-1-1",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-example-item-2-1",
+          "classes": "mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-example-item-3-1",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "menuitems-example-item-4-1",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-example-item-6-1",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "#"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Tiene selección en items padres",
+    "description": "Cuando se ha seleccionado algún elemento hijo, si se desea, el padre se puede mostrar con color usando la clase <code>.c-menubar__button--has-selection</code>.",
+    "data": {
+      "id": "with-all-parent-items-2",
+      "idPrefix": "parent-example",
+      "ariaLabel":"Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-example-item-1-2",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-example-item-2-2",
+          "classes": "c-menubar__button--has-selection mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-example-item-3-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--has-selection mb-base mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "menuitems-example-item-4-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--has-selection mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-example-item-6-2",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "#"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con sub-item activo",
+    "description": "Cuando se ha seleccionado algún elemento hijo, el padre se muestra con color. Añade <code>active: true</code> a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuBarAction(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item o varios sub-items de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuBarAction('mi-menubar', 'sub-sub-menuitems-example-item-3-2-1-1')</code> para desactivar el sub-item actual y activar el primer sub-item del tercer menú de este ejemplo. Si quieres activar varios sub-items, abre la consola del navegador y escribe <code>activateItemMenuBarAction('mi-menubar', ['sub-menuitems-example-item-2-2-1', 'sub-menuitems-example-item-2-2-2', 'sub-menuitems-example-item-2-2-3'])</code>.",
+    "data": {
+      "id": "mi-menubar",
+      "idPrefix": "parent-example",
+      "ariaLabel":"Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-example-item-1-2",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-example-item-2-2",
+          "classes": "mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "active": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-example-item-3-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "menuitems-example-item-4-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-example-item-6-2",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "#"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con un item padre deshabilitado",
+    "data": {
+      "id": "with-disabled",
+      "idPrefix": "disabled-example",
+      "ariaLabel":"Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-disabled-example-item-1-2",
+          "disabled": true,
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-disabled-example-item-2-2",
+          "classes": "mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-disabled-example-item-3-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "menuitems-disabled-example-item-4-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-disabled-example-item-6-2",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "#"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con un item padre activo",
+    "data": {
+      "id": "with-active",
+      "idPrefix": "active-example",
+      "ariaLabel":"Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-active-example-item-1-2",
+          "active": true,
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-active-example-item-2-2",
+          "classes": "mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-active-example-item-3-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "menuitems-active-example-item-4-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-active-example-item-6-2",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "#"
+        }
+      ]
+    }
+  },
+  {
+    "name": "peque",
+    "description": "Usando clases modificadoras en los items.",
+    "data": {
+      "id": "small-items",
+      "idPrefix": "small-example",
+      "ariaLabel":"Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "small-example-item-1",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "c-menubar__button--sm mb-sm mr-sm"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "small-example-item-2",
+          "classes": "c-menubar__button--sm mb-sm mr-sm",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "small-example-item-3",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--sm mb-sm mr-sm"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "small-example-item-4",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--sm mb-sm mr-sm"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "small-example-item-6",
+          "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
+          "href": "#"
+        }
+      ]
+    }
+  },
+  {
+    "name": "transparente",
+    "description": "Usando clases modificadoras en los items.",
+    "data": {
+      "id": "transparent-items",
+      "idPrefix": "transparent-example",
+      "ariaLabel":"Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "transparent-example-item-1",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "c-menubar__button--transparent mb-sm mr-sm"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "transparent-example-item-2",
+          "classes": "c-menubar__button--transparent mb-sm mr-sm",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "transparent-example-item-3",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--transparent mb-sm mr-sm"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "transparent-example-item-4",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--transparent mb-sm mr-sm"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "transparent-example-item-6",
+          "classes": "c-menubar__button--transparent mb-sm mr-sm",
+          "href": "#"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con estilos de cabecera",
+    "description": "En casos especiales, una cabecera fija con un Menubar puede ser útil. Si necesitas una navegación con enlaces, debes usas el componente Menu navigation en vez de este Menubar.",
+    "data": {
+      "id": "header-items",
+      "idPrefix": "header-example",
+      "ariaLabel":"Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "header-example-item-1",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "c-menubar__button--header mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "header-example-item-2",
+          "classes": "c-menubar__button--header mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "header-example-item-3",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--header mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "header-example-item-4",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--header mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "header-example-item-6",
+          "classes": "c-menubar__button--header mr-base",
+          "href": "#"
+        }
+      ],
+      "classes": "bg-neutral-lighter"
+    }
+  },
+  {
+    "name": "Ejemplo de filtros",
+    "description": 'Usa el Menubar sobre una lista de items para filtrarlos u ordenarlos. Usa la clase modificadora <code>.c-menubar--last-right</code> para posicionar el último item a la derecha en breakpoints grandes.',
+    "data": {
+      "id": "filter-items",
+      "idPrefix": "filter-example",
+      "ariaLabel":"Menubar descrición",
+      "items": [
+        {
+          "text": "Estados y trámites",
+          "ariaLabel": "Estados y trámites",
+          "id": "filter-example-item-2",
+          "classes": "c-menubar__button--sm mb-sm mr-sm",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Filtrar",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Filtrar servicios"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Filtrar procesos y convocatorias"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "none",
+                "html": '<span class="inline-block px-base py-sm text-neutral-dark focus:outline-none">Estados</span>'
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estados",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Borrador"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Borrador rechazado"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "En validación"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Publicado"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Con cambios"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Dados de baja"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "none",
+                "html": '<span class="inline-block px-base py-sm text-neutral-dark focus:outline-none">Plazos (sólo aplican a convocatorias y procesos)</span>'
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Plazos (sólo aplican a convocatorias y procesos)",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Plazo permanente"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Plazo temporal indefinido"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Plazo temporal abierto"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Plazo temporal finalizado"
+                  }
+                ]
+              }
+            ]
+          }
+        },
+        {
+          "text": "Tipología",
+          "ariaLabel": "Tipología",
+          "id": "filter-example-item-3",
+          "classes": "c-menubar__button--sm mb-sm mr-sm",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Filtrar por procedimiento",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Procedimiento"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Servicio sin tramitación de procedimiento"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Filtrar por interno/externo",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Interno"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Externo"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Filtrar por común/específico",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Común, horizontal"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Específico, sectorial"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Específico de uso común"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Filtrar por tipo de inicio",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Inicio de oficio"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Inicio a instancia"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Con convocatorias"
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Tramitación íntegra digital"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Eliminar filtros",
+          "ariaLabel": "Eliminar filtros",
+          "id": "filter-example-item-6",
+          "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
+          "href": "#"
+        },
+        {
+          "text": "Orden: Actividad reciente",
+          "ariaLabel": "Orden: Actividad reciente",
+          "id": "filter-example-item-4",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tipos de ordenación",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Actividad reciente",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Publicación reciente"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Creación reciente"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "html": 'Número de servicio (de mayor a menor)'
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--sm mb-sm"
+        }
+      ],
+      "classes": "c-menubar--last-right"
+    }
+  },
+  {
+    "name": "con label",
+    "description": 'Con label que explica que este menú actúa sobre otro elemento. Puedes usar las clases <code>.sr-only</code> para que se vea sólo en lectores de pantalla.',
+    "data": {
+      "id": "with-label-items",
+      "idPrefix": "label-example",
+      "ariaLabel":"Menubar descrición",
+      "label": {
+        "text": "Esto es un label"
+      },
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-example-item-1-3",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-example-item-2-3",
+          "classes": "mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-example-item-3-3",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "menuitems-example-item-4-3",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-example-item-6-3",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "#"
+        }
+      ]
+    }
+  }
+] %}