desy-html

Menubar

Mostrar parámetros

Parámetros del componente

              params:
- name: id
  type: string
  required: true
  description: menubar unique id.
- name: idPrefix
  type: string
  required: false
  description: String to prefix id for each item if no id is specified on each item.
- name: ariaLabel
  type: text
  required: true
  description: aria-label for menubar. Should be a description of the menubar.
- name: label
  type: object
  required: true
  description: Label text or HTML by specifying value for either text or html keys.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text for the button. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML for the button. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the element that acts as label.
- name: items
  type: array
  required: true
  description: Array of items objects.
  params:
  - name: href
    type: string
    required: false
    description: Item link.
  - name: target
    type: string
    required: false
    description: The target where the item should link to.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within each item label. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within each item label. If `html` is provided, the `text` argument will be ignored.
  - name: id
    type: string
    required: false
    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
  - name: ariaLabel
    type: text
    required: true
    description: aria-label for parent items. Should be similar as item text or item html text content.
  - name: disabled
    type: boolean
    required: false
    description: If disabled, the item will be disabled
  - name: active
    type: boolean
    required: false
    description: If active, the item will be with primary color
  - name: sub
    type: boolean
    required: false
    description: If true, content provided will be revealed when the item is expanded.
    - name: classes
      type: string
      required: false
      description: Classes to add to the sub container.
    - name: items
      type: array
      required: false
      description: Provide subitems for the sub reveal.
      - name: role
        type: string
        required: false
        description: Defaults to `none`. Allowed values are `none`, `group`, `menuitem`, `menuitemcheckbox` and `separator`. Use the `group` role to group menuitems, menuitemcheckbox or menuitemradio sub-subitems.
      - name: ariaLabel
        type: text
        required: false
        description: aria-label for parent role `group` items. Should be descriptive of group.
      - name: text
        type: string
        required: true
        description: Text to use within each item.
      - name: html
        type: string
        required: true
        description: Only can be used in menuitems with role=`none`. If `text` is set, this is not required. HTML to use within each item label. If `html` is provided, the `text` argument will be ignored.
      - name: checked
        type: boolean
        required: false
        description: If true, not grouped `menuitemcheckbox` will be checked.
      - name: items
        type: array
        required: false
        description: Optional array for `role=menuitemradio` sub-subitems, that should be nested in a `role=group` subitem.
        - name: role
          type: string
          required: false
          description: Defaults to `none`. Allowed values are `none`, `menuitem`, `menuitemcheckbox` and `menuitemradio`.
        - name: text
          type: string
          required: true
          description: Text to use within each item label.
        - name: checked
          type: boolean
          required: false
          description: If true, `menuitemradio` will be checked.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the item.
- name: classes
  type: string
  required: false
  description: Classes to add to the menubar container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the menubar container.

accessibilityCriteria: |
  ## sub reveals
  Must:
  - be visible as static content if JavaScript is unavailable or fails
  - be hidden if JavaScript is available and is collapsed
  - indicate if content is expanded or collapsed
  - indicate that there is collapsed content to interact with

  Note that alphagov have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575

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

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

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

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

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

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

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

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

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