DESY

Sistema de Diseño del Gobierno de Aragón

Barra de menús

Mostrar y ocultar

Edita y genera cambios sobre otro elemento, pero no navega a un sitio diferente.

Menubar

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)"
    }
  ]
}) }}

Tiene selección en items padres

Cuando se ha seleccionado algún elemento hijo, si se desea, el padre se puede mostrar con color usando la clase .c-menubar__button--has-selection.

Mostrar códigodel ejemplo: Tiene selección en items padres

Contenido

Nunjucks macro
{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "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": "javascript:void(0)"
    }
  ]
}) }}

Con sub-item activo

Cuando se ha seleccionado algún elemento hijo, el padre se muestra con color. Añade active: true a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global activateItemMenuBarAction(elementMenu, idItemSeleccionado) para seleccionar un sub-item o varios sub-items de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe activateItemMenuBarAction('mi-menubar', 'sub-sub-menuitems-example-item-3-2-1-1') 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 activateItemMenuBarAction('mi-menubar', ['sub-menuitems-example-item-2-2-1', 'sub-menuitems-example-item-2-2-2', 'sub-menuitems-example-item-2-2-3']).

Mostrar códigodel ejemplo: Con sub-item activo

Contenido

Nunjucks macro
{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "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": "javascript:void(0)"
    }
  ]
}) }}

Con un item padre deshabilitado

Mostrar códigodel ejemplo: Con un item padre deshabilitado

Contenido

Nunjucks macro
{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "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": "javascript:void(0)"
    }
  ]
}) }}

Con un item padre activo

Mostrar códigodel ejemplo: Con un item padre activo

Contenido

Nunjucks macro
{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "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": "javascript:void(0)"
    }
  ]
}) }}

Grande

Usando clases modificadoras en los items.

Mostrar códigodel ejemplo: Grande

Contenido

Nunjucks macro
{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "id": "large-items",
  "idPrefix": "large-example",
  "ariaLabel": "Menubar descrición",
  "items": [
    {
      "text": "Menuitem",
      "ariaLabel": "Menuitem",
      "id": "large-example-item-1",
      "sub": {
        "items": [
          {
            "role": "menuitem",
            "text": "Subitem 1"
          },
          {
            "role": "menuitem",
            "text": "Subitem 2"
          },
          {
            "role": "menuitem",
            "text": "Subitem 3"
          }
        ]
      },
      "classes": "c-menubar__button--lg mb-sm mr-sm"
    },
    {
      "text": "Menuitemcheckbox",
      "ariaLabel": "Menuitemcheckbox",
      "id": "large-example-item-2",
      "classes": "c-menubar__button--lg 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": "large-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--lg mb-sm mr-sm"
    },
    {
      "text": "Items mixtos",
      "ariaLabel": "Items mixtos",
      "id": "large-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--lg mb-sm mr-sm"
    },
    {
      "text": "Menuitem solo",
      "ariaLabel": "Menuitem solo",
      "id": "large-example-item-6",
      "classes": "c-menubar__button--transparent c-menubar__button--lg mb-sm mr-sm",
      "href": "javascript:void(0)"
    }
  ]
}) }}

Peque

Usando clases modificadoras en los items.

Mostrar códigodel ejemplo: Peque

Contenido

Nunjucks macro
{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "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": "javascript:void(0)"
    }
  ]
}) }}

Transparente

Usando clases modificadoras en los items.

Mostrar códigodel ejemplo: Transparente

Contenido

Nunjucks macro
{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "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": "javascript:void(0)"
    }
  ]
}) }}

Con estilos de cabecera

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.

Mostrar códigodel ejemplo: Con estilos de cabecera

Contenido

Nunjucks macro
{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "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": "javascript:void(0)"
    }
  ],
  "classes": "bg-neutral-lighter"
}) }}

Ejemplo de filtros

Usa el Menubar sobre una lista de items para filtrarlos u ordenarlos. Usa la clase modificadora .c-menubar--last-right para posicionar el último item a la derecha en breakpoints grandes.

Mostrar códigodel ejemplo: Ejemplo de filtros

Contenido

Nunjucks macro
{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "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-hidden'>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-hidden'>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": "javascript:void(0)"
    },
    {
      "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"
}) }}

Con label

Con label que explica que este menú actúa sobre otro elemento. Puedes usar las clases .sr-only para que se vea sólo en lectores de pantalla.

Esto es un label

Mostrar códigodel ejemplo: Con label

Contenido

Nunjucks macro
{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "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": "javascript:void(0)"
    }
  ]
}) }}