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.
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": "javascript:void(0)"
}
]
}) }}