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.
Descripción visual
Barra horizontal con fondo blanco que contiene cinco elementos interactivos alineados a la izquierda. Cuatro botones con texto azul oscuro(color #0969DA) y flechas desplegables, seguidos de un enlace de texto azul sin flecha. Bordes grises claros de 1px rodean cada botón, con espaciado uniforme entre elementos.
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)"
}
]
}) }}