Por defecto #
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.
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Menubar", versión: 12.0.1, del sistema de diseño DESY
Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.
Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
<!-- menubar -->
<div id="with-all-parent-items-1" class="c-menubar">
<ul data-module="c-menubar" id="with-all-parent-items-1-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="Menubar descrición">
<li class="relative" role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base" id="menuitems-example-item-1-1">
<span class="inline-flex self-center max-w-xs align-middle truncate">Menuitem</span>
<svg class="inline-block -mr-2 align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
<g>
<path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
</g>
</svg></a>
<ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitem">
<li role="menuitem" id="sub-menuitems-example-item-1-1-1" data-option="sub-menuitems-example-item-1-1-1" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none">
Subitem 1
</li>
<li role="menuitem" id="sub-menuitems-example-item-1-1-2" data-option="sub-menuitems-example-item-1-1-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none">
Subitem 2
</li>
<li role="menuitem" id="sub-menuitems-example-item-1-1-3" data-option="sub-menuitems-example-item-1-1-3" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none">
Subitem 3
</li>
</ul>
</li>
<li class="relative" role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base" id="menuitems-example-item-2-1">
<span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemcheckbox</span>
<svg class="inline-block -mr-2 align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
<g>
<path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
</g>
</svg></a>
<ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemcheckbox">
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-example-item-2-1-1" data-option="sub-menuitems-example-item-2-1-1">
Subitem 1
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-example-item-2-1-2" data-option="sub-menuitems-example-item-2-1-2">
Subitem 2
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-example-item-2-1-3" data-option="sub-menuitems-example-item-2-1-3">
Subitem 3
</li>
</ul>
</li>
<li class="relative" role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base" id="menuitems-example-item-3-1">
<span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemradio</span>
<svg class="inline-block -mr-2 align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
<g>
<path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
</g>
</svg></a>
<ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemradio">
<li role="none">
<ul role="group" id="sub-menuitems-example-item-3-1-1" data-option="sub-menuitems-example-item-3-1-1" aria-label="group label">
<li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-3-1-1-1" data-option="sub-sub-menuitems-example-item-3-1-1-1">
Radio 1
</li>
<li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-3-1-1-2" data-option="sub-sub-menuitems-example-item-3-1-1-2">
Radio 2
</li>
<li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-3-1-1-3" data-option="sub-sub-menuitems-example-item-3-1-1-3">
Radio 3
</li>
</ul>
</li>
</ul>
</li>
<li class="relative" role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base" id="menuitems-example-item-4-1">
<span class="inline-flex self-center max-w-xs align-middle truncate">Items mixtos</span>
<svg class="inline-block -mr-2 align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
<g>
<path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
</g>
</svg></a>
<ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Items mixtos">
<li role="none">
<ul role="group" id="sub-menuitems-example-item-4-1-1" data-option="sub-menuitems-example-item-4-1-1" aria-label="Tamaño de letra">
<li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-1-1-1" data-option="sub-sub-menuitems-example-item-4-1-1-1">
Tamaño mayor
</li>
<li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-1-1-2" data-option="sub-sub-menuitems-example-item-4-1-1-2">
Tamaño menor
</li>
</ul>
</li>
<li role="separator" id="sub-menuitems-example-item-4-1-2" class="my-sm border-b border-neutral-base">
</li>
<li role="none">
<ul role="group" id="sub-menuitems-example-item-4-1-3" data-option="sub-menuitems-example-item-4-1-3" aria-label="Estilo de letra">
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-1-3-1" data-option="sub-sub-menuitems-example-item-4-1-3-1">
Negritas
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-1-3-2" data-option="sub-sub-menuitems-example-item-4-1-3-2">
Itálicas
</li>
</ul>
</li>
<li role="separator" id="sub-menuitems-example-item-4-1-4" class="my-sm border-b border-neutral-base">
</li>
<li role="none">
<ul role="group" id="sub-menuitems-example-item-4-1-5" data-option="sub-menuitems-example-item-4-1-5" aria-label="Estilo de texto">
<li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-1-5-1" data-option="sub-sub-menuitems-example-item-4-1-5-1">
Ninguno
</li>
<li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-1-5-2" data-option="sub-sub-menuitems-example-item-4-1-5-2">
Tachado
</li>
<li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-1-5-3" data-option="sub-sub-menuitems-example-item-4-1-5-3">
Subrayado
</li>
</ul>
</li>
</ul>
</li>
<li class="relative" role="none">
<a role="menuitem" id="menuitems-example-item-6-1" href="#" class="c-menubar__button c-menubar__button--transparent mb-base mr-base">
Menuitem solo
</a>
</li>
</ul>
</div>
<!-- /menubar -->
Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Menubar", versión: 12.0.1, del sistema de diseño DESY
Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
"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": "#"
}
]
}) }}Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
"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": "#"
}
]
}) }}