Menubar examples

Show params

Params

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

Default example

With mixed parameters

Show code

Macro

{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "id": "with-all-parent-items-1",
  "idPrefix": "parent-example",
  "ariaLabel": "Menubar description",
  "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": "Mixed items",
      "ariaLabel": "Mixeditems",
      "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": "#"
    }
  ]
})  }}

Markup


<!-- menubar -->
<div id="with-all-parent-items-1" class="c-menubar">
  <ul data-module="c-menubar" id="with-all-parent-items-1-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="Menubar description">
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-example-item-1-1">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitem</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitem">
                        <li role="menuitem" id="sub-menuitems-example-item-1-1" data-option="sub-menuitems-example-item-1-1" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 1
                        </li>
                        <li role="menuitem" id="sub-menuitems-example-item-1-1-2" data-option="sub-menuitems-example-item-1-1-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 2
                        </li>
                        <li role="menuitem" id="sub-menuitems-example-item-1-1-3" data-option="sub-menuitems-example-item-1-1-3" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-example-item-2-1">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemcheckbox</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemcheckbox">
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-example-item-2-1" data-option="sub-menuitems-example-item-2-1">
                          Subitem 1
                        </li>
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-example-item-2-1-2" data-option="sub-menuitems-example-item-2-1-2">
                          Subitem 2
                        </li>
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-example-item-2-1-3" data-option="sub-menuitems-example-item-2-1-3">
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-example-item-3-1">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemradio</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemradio">
                        <li role="none">
                          <ul role="group" id="sub-menuitems-example-item-3-1" data-option="sub-menuitems-example-item-3-1" aria-label="group label">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-3-1" data-option="sub-sub-menuitems-example-item-3-1">
                                  Radio 1
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-3-1-2" data-option="sub-sub-menuitems-example-item-3-1-2">
                                  Radio 2
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-3-1-3" data-option="sub-sub-menuitems-example-item-3-1-3">
                                  Radio 3
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-example-item-4-1">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Mixed items</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Mixeditems">
                        <li role="none">
                          <ul role="group" id="sub-menuitems-example-item-4-1" data-option="sub-menuitems-example-item-4-1" aria-label="Tamaño de letra">
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-1" data-option="sub-sub-menuitems-example-item-4-1">
                                  Tamaño mayor
                                </li>
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-1-2" data-option="sub-sub-menuitems-example-item-4-1-2">
                                  Tamaño menor
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-menuitems-example-item-4-1-2" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-menuitems-example-item-4-1-3" data-option="sub-menuitems-example-item-4-1-3" aria-label="Estilo de letra">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-1-3" data-option="sub-sub-menuitems-example-item-4-1-3">
                                  Negritas
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-1-3-2" data-option="sub-sub-menuitems-example-item-4-1-3-2">
                                  Itálicas
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-menuitems-example-item-4-1-4" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-menuitems-example-item-4-1-5" data-option="sub-menuitems-example-item-4-1-5" aria-label="Estilo de texto">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-1-5" data-option="sub-sub-menuitems-example-item-4-1-5">
                                  Ninguno
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-1-5-2" data-option="sub-sub-menuitems-example-item-4-1-5-2">
                                  Tachado
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-1-5-3" data-option="sub-sub-menuitems-example-item-4-1-5-3">
                                  Subrayado
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a role="menuitem" id="menuitems-example-item-6-1" href="#" class="c-menubar__button c-menubar__button--transparent mb-base mr-base"  >
              Menuitem solo
            </a>
        </li>
  </ul>
</div>
<!-- /menubar -->

Has Selection in parent items

When a selection has been made in any children, the parent item could be colored.

Show code

Macro

{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "id": "with-all-parent-items-2",
  "idPrefix": "parent-example",
  "ariaLabel": "Menubar description",
  "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": "Mixed items",
      "ariaLabel": "Mixeditems",
      "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": "#"
    }
  ]
})  }}

Markup


<!-- menubar -->
<div id="with-all-parent-items-2" class="c-menubar">
  <ul data-module="c-menubar" id="with-all-parent-items-2-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="Menubar description">
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-example-item-1-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitem</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitem">
                        <li role="menuitem" id="sub-menuitems-example-item-1-2" data-option="sub-menuitems-example-item-1-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 1
                        </li>
                        <li role="menuitem" id="sub-menuitems-example-item-1-2-2" data-option="sub-menuitems-example-item-1-2-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 2
                        </li>
                        <li role="menuitem" id="sub-menuitems-example-item-1-2-3" data-option="sub-menuitems-example-item-1-2-3" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--has-selection mb-base mr-base"  " id="menuitems-example-item-2-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemcheckbox</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemcheckbox">
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-example-item-2-2" data-option="sub-menuitems-example-item-2-2">
                          Subitem 1
                        </li>
                        <li role="menuitemcheckbox" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-example-item-2-2-2" data-option="sub-menuitems-example-item-2-2-2">
                          Subitem 2
                        </li>
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-example-item-2-2-3" data-option="sub-menuitems-example-item-2-2-3">
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--has-selection mb-base mr-base"  " id="menuitems-example-item-3-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemradio</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemradio">
                        <li role="none">
                          <ul role="group" id="sub-menuitems-example-item-3-2" data-option="sub-menuitems-example-item-3-2" aria-label="group label">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-3-2" data-option="sub-sub-menuitems-example-item-3-2">
                                  Radio 1
                                </li>
                                <li role="menuitemradio" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-3-2-2" data-option="sub-sub-menuitems-example-item-3-2-2">
                                  Radio 2
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-3-2-3" data-option="sub-sub-menuitems-example-item-3-2-3">
                                  Radio 3
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--has-selection mb-base mr-base"  " id="menuitems-example-item-4-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Mixed items</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Mixeditems">
                        <li role="none">
                          <ul role="group" id="sub-menuitems-example-item-4-2" data-option="sub-menuitems-example-item-4-2" aria-label="Tamaño de letra">
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-2" data-option="sub-sub-menuitems-example-item-4-2">
                                  Tamaño mayor
                                </li>
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-2-2" data-option="sub-sub-menuitems-example-item-4-2-2">
                                  Tamaño menor
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-menuitems-example-item-4-2-2" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-menuitems-example-item-4-2-3" data-option="sub-menuitems-example-item-4-2-3" aria-label="Estilo de letra">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-2-3" data-option="sub-sub-menuitems-example-item-4-2-3">
                                  Negritas
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-2-3-2" data-option="sub-sub-menuitems-example-item-4-2-3-2">
                                  Itálicas
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-menuitems-example-item-4-2-4" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-menuitems-example-item-4-2-5" data-option="sub-menuitems-example-item-4-2-5" aria-label="Estilo de texto">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-2-5" data-option="sub-sub-menuitems-example-item-4-2-5">
                                  Ninguno
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-2-5-2" data-option="sub-sub-menuitems-example-item-4-2-5-2">
                                  Tachado
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-2-5-3" data-option="sub-sub-menuitems-example-item-4-2-5-3">
                                  Subrayado
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a role="menuitem" id="menuitems-example-item-6-2" href="#" class="c-menubar__button c-menubar__button--transparent mb-base mr-base"  >
              Menuitem solo
            </a>
        </li>
  </ul>
</div>
<!-- /menubar -->

With one disabled parent item

Show code

Macro

{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "id": "with-disabled",
  "idPrefix": "disabled-example",
  "ariaLabel": "Menubar description",
  "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": "Mixed items",
      "ariaLabel": "Mixeditems",
      "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": "#"
    }
  ]
})  }}

Markup


<!-- menubar -->
<div id="with-disabled" class="c-menubar">
  <ul data-module="c-menubar" id="with-disabled-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="Menubar description">
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base c-menubar__button--disabled"  disabled="disabled" aria-disabled="true" tabindex="-1" " id="menuitems-disabled-example-item-1-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitem</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitem">
                        <li role="menuitem" id="sub-menuitems-disabled-example-item-1-2" data-option="sub-menuitems-disabled-example-item-1-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 1
                        </li>
                        <li role="menuitem" id="sub-menuitems-disabled-example-item-1-2-2" data-option="sub-menuitems-disabled-example-item-1-2-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 2
                        </li>
                        <li role="menuitem" id="sub-menuitems-disabled-example-item-1-2-3" data-option="sub-menuitems-disabled-example-item-1-2-3" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-disabled-example-item-2-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemcheckbox</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemcheckbox">
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-disabled-example-item-2-2" data-option="sub-menuitems-disabled-example-item-2-2">
                          Subitem 1
                        </li>
                        <li role="menuitemcheckbox" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-disabled-example-item-2-2-2" data-option="sub-menuitems-disabled-example-item-2-2-2">
                          Subitem 2
                        </li>
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-disabled-example-item-2-2-3" data-option="sub-menuitems-disabled-example-item-2-2-3">
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-disabled-example-item-3-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemradio</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemradio">
                        <li role="none">
                          <ul role="group" id="sub-menuitems-disabled-example-item-3-2" data-option="sub-menuitems-disabled-example-item-3-2" aria-label="group label">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-3-2" data-option="sub-sub-menuitems-disabled-example-item-3-2">
                                  Radio 1
                                </li>
                                <li role="menuitemradio" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-3-2-2" data-option="sub-sub-menuitems-disabled-example-item-3-2-2">
                                  Radio 2
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-3-2-3" data-option="sub-sub-menuitems-disabled-example-item-3-2-3">
                                  Radio 3
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-disabled-example-item-4-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Mixed items</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Mixeditems">
                        <li role="none">
                          <ul role="group" id="sub-menuitems-disabled-example-item-4-2" data-option="sub-menuitems-disabled-example-item-4-2" aria-label="Tamaño de letra">
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-4-2" data-option="sub-sub-menuitems-disabled-example-item-4-2">
                                  Tamaño mayor
                                </li>
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-4-2-2" data-option="sub-sub-menuitems-disabled-example-item-4-2-2">
                                  Tamaño menor
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-menuitems-disabled-example-item-4-2-2" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-menuitems-disabled-example-item-4-2-3" data-option="sub-menuitems-disabled-example-item-4-2-3" aria-label="Estilo de letra">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-4-2-3" data-option="sub-sub-menuitems-disabled-example-item-4-2-3">
                                  Negritas
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-4-2-3-2" data-option="sub-sub-menuitems-disabled-example-item-4-2-3-2">
                                  Itálicas
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-menuitems-disabled-example-item-4-2-4" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-menuitems-disabled-example-item-4-2-5" data-option="sub-menuitems-disabled-example-item-4-2-5" aria-label="Estilo de texto">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-4-2-5" data-option="sub-sub-menuitems-disabled-example-item-4-2-5">
                                  Ninguno
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-4-2-5-2" data-option="sub-sub-menuitems-disabled-example-item-4-2-5-2">
                                  Tachado
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-4-2-5-3" data-option="sub-sub-menuitems-disabled-example-item-4-2-5-3">
                                  Subrayado
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a role="menuitem" id="menuitems-disabled-example-item-6-2" href="#" class="c-menubar__button c-menubar__button--transparent mb-base mr-base"  >
              Menuitem solo
            </a>
        </li>
  </ul>
</div>
<!-- /menubar -->

With one active parent item

Show code

Macro

{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "id": "with-active",
  "idPrefix": "active-example",
  "ariaLabel": "Menubar description",
  "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": "Mixed items",
      "ariaLabel": "Mixeditems",
      "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": "#"
    }
  ]
})  }}

Markup


<!-- menubar -->
<div id="with-active" class="c-menubar">
  <ul data-module="c-menubar" id="with-active-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="Menubar description">
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base c-menubar__button--primary"  " id="menuitems-active-example-item-1-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitem</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitem">
                        <li role="menuitem" id="sub-menuitems-active-example-item-1-2" data-option="sub-menuitems-active-example-item-1-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 1
                        </li>
                        <li role="menuitem" id="sub-menuitems-active-example-item-1-2-2" data-option="sub-menuitems-active-example-item-1-2-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 2
                        </li>
                        <li role="menuitem" id="sub-menuitems-active-example-item-1-2-3" data-option="sub-menuitems-active-example-item-1-2-3" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-active-example-item-2-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemcheckbox</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemcheckbox">
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-active-example-item-2-2" data-option="sub-menuitems-active-example-item-2-2">
                          Subitem 1
                        </li>
                        <li role="menuitemcheckbox" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-active-example-item-2-2-2" data-option="sub-menuitems-active-example-item-2-2-2">
                          Subitem 2
                        </li>
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-active-example-item-2-2-3" data-option="sub-menuitems-active-example-item-2-2-3">
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-active-example-item-3-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemradio</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemradio">
                        <li role="none">
                          <ul role="group" id="sub-menuitems-active-example-item-3-2" data-option="sub-menuitems-active-example-item-3-2" aria-label="group label">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-active-example-item-3-2" data-option="sub-sub-menuitems-active-example-item-3-2">
                                  Radio 1
                                </li>
                                <li role="menuitemradio" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-active-example-item-3-2-2" data-option="sub-sub-menuitems-active-example-item-3-2-2">
                                  Radio 2
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-active-example-item-3-2-3" data-option="sub-sub-menuitems-active-example-item-3-2-3">
                                  Radio 3
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-active-example-item-4-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Mixed items</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Mixeditems">
                        <li role="none">
                          <ul role="group" id="sub-menuitems-active-example-item-4-2" data-option="sub-menuitems-active-example-item-4-2" aria-label="Tamaño de letra">
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-active-example-item-4-2" data-option="sub-sub-menuitems-active-example-item-4-2">
                                  Tamaño mayor
                                </li>
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-active-example-item-4-2-2" data-option="sub-sub-menuitems-active-example-item-4-2-2">
                                  Tamaño menor
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-menuitems-active-example-item-4-2-2" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-menuitems-active-example-item-4-2-3" data-option="sub-menuitems-active-example-item-4-2-3" aria-label="Estilo de letra">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-active-example-item-4-2-3" data-option="sub-sub-menuitems-active-example-item-4-2-3">
                                  Negritas
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-active-example-item-4-2-3-2" data-option="sub-sub-menuitems-active-example-item-4-2-3-2">
                                  Itálicas
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-menuitems-active-example-item-4-2-4" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-menuitems-active-example-item-4-2-5" data-option="sub-menuitems-active-example-item-4-2-5" aria-label="Estilo de texto">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-active-example-item-4-2-5" data-option="sub-sub-menuitems-active-example-item-4-2-5">
                                  Ninguno
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-active-example-item-4-2-5-2" data-option="sub-sub-menuitems-active-example-item-4-2-5-2">
                                  Tachado
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-active-example-item-4-2-5-3" data-option="sub-sub-menuitems-active-example-item-4-2-5-3">
                                  Subrayado
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a role="menuitem" id="menuitems-active-example-item-6-2" href="#" class="c-menubar__button c-menubar__button--transparent mb-base mr-base"  >
              Menuitem solo
            </a>
        </li>
  </ul>
</div>
<!-- /menubar -->

With one disabled parent item

Show code

Macro

{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "id": "with-disabled",
  "idPrefix": "disabled-example",
  "ariaLabel": "Menubar description",
  "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"
          }
        ],
        "attributes": {
          "aria-labelledby": "menuitems-disabled-example-item-1-2"
        }
      },
      "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"
          }
        ],
        "attributes": {
          "aria-labelledby": "menuitems-disabled-example-item-2-2"
        }
      }
    },
    {
      "text": "Menuitemradio",
      "ariaLabel": "Menuitemradio",
      "id": "menuitems-disabled-example-item-3-2",
      "sub": {
        "items": [
          {
            "role": "group",
            "text": "Group",
            "items": [
              {
                "role": "menuitemradio",
                "text": "Radio 1"
              },
              {
                "role": "menuitemradio",
                "text": "Radio 2",
                "checked": true
              },
              {
                "role": "menuitemradio",
                "text": "Radio 3"
              }
            ]
          }
        ],
        "attributes": {
          "aria-labelledby": "menuitems-disabled-example-item-3-2"
        }
      },
      "classes": "mb-base mr-base"
    },
    {
      "text": "Mixed items",
      "ariaLabel": "Mixeditems",
      "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"
              }
            ]
          }
        ],
        "attributes": {
          "aria-labelledby": "menuitems-disabled-example-item-4-2"
        }
      },
      "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": "#"
    }
  ],
  "attributes": {
    "aria-label": "Menubar description of use"
  }
})  }}

Markup


<!-- menubar -->
<div id="with-disabled" class="c-menubar" aria-label="Menubar description of use">
  <ul data-module="c-menubar" id="with-disabled-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="Menubar description">
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base c-menubar__button--disabled"  disabled="disabled" aria-disabled="true" tabindex="-1" " id="menuitems-disabled-example-item-1-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitem</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitem" aria-labelledby="menuitems-disabled-example-item-1-2">
                        <li role="menuitem" id="sub-menuitems-disabled-example-item-1-2" data-option="sub-menuitems-disabled-example-item-1-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 1
                        </li>
                        <li role="menuitem" id="sub-menuitems-disabled-example-item-1-2-2" data-option="sub-menuitems-disabled-example-item-1-2-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 2
                        </li>
                        <li role="menuitem" id="sub-menuitems-disabled-example-item-1-2-3" data-option="sub-menuitems-disabled-example-item-1-2-3" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-disabled-example-item-2-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemcheckbox</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemcheckbox" aria-labelledby="menuitems-disabled-example-item-2-2">
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-disabled-example-item-2-2" data-option="sub-menuitems-disabled-example-item-2-2">
                          Subitem 1
                        </li>
                        <li role="menuitemcheckbox" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-disabled-example-item-2-2-2" data-option="sub-menuitems-disabled-example-item-2-2-2">
                          Subitem 2
                        </li>
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-disabled-example-item-2-2-3" data-option="sub-menuitems-disabled-example-item-2-2-3">
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-disabled-example-item-3-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemradio</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemradio" aria-labelledby="menuitems-disabled-example-item-3-2">
                        <li role="none">
                          <ul role="group" id="sub-menuitems-disabled-example-item-3-2" data-option="sub-menuitems-disabled-example-item-3-2">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-3-2" data-option="sub-sub-menuitems-disabled-example-item-3-2">
                                  Radio 1
                                </li>
                                <li role="menuitemradio" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-3-2-2" data-option="sub-sub-menuitems-disabled-example-item-3-2-2">
                                  Radio 2
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-3-2-3" data-option="sub-sub-menuitems-disabled-example-item-3-2-3">
                                  Radio 3
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-disabled-example-item-4-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Mixed items</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Mixeditems" aria-labelledby="menuitems-disabled-example-item-4-2">
                        <li role="none">
                          <ul role="group" id="sub-menuitems-disabled-example-item-4-2" data-option="sub-menuitems-disabled-example-item-4-2" aria-label="Tamaño de letra">
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-4-2" data-option="sub-sub-menuitems-disabled-example-item-4-2">
                                  Tamaño mayor
                                </li>
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-4-2-2" data-option="sub-sub-menuitems-disabled-example-item-4-2-2">
                                  Tamaño menor
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-menuitems-disabled-example-item-4-2-2" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-menuitems-disabled-example-item-4-2-3" data-option="sub-menuitems-disabled-example-item-4-2-3" aria-label="Estilo de letra">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-4-2-3" data-option="sub-sub-menuitems-disabled-example-item-4-2-3">
                                  Negritas
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-4-2-3-2" data-option="sub-sub-menuitems-disabled-example-item-4-2-3-2">
                                  Itálicas
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-menuitems-disabled-example-item-4-2-4" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-menuitems-disabled-example-item-4-2-5" data-option="sub-menuitems-disabled-example-item-4-2-5" aria-label="Estilo de texto">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-4-2-5" data-option="sub-sub-menuitems-disabled-example-item-4-2-5">
                                  Ninguno
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-4-2-5-2" data-option="sub-sub-menuitems-disabled-example-item-4-2-5-2">
                                  Tachado
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-disabled-example-item-4-2-5-3" data-option="sub-sub-menuitems-disabled-example-item-4-2-5-3">
                                  Subrayado
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a role="menuitem" id="menuitems-disabled-example-item-6-2" href="#" class="c-menubar__button c-menubar__button--transparent mb-base mr-base"  >
              Menuitem solo
            </a>
        </li>
  </ul>
</div>
<!-- /menubar -->

Small

Using modifier classes in items.

Show code

Macro

{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "id": "small-items",
  "idPrefix": "small-example",
  "ariaLabel": "Menubar description",
  "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": "Mixed items",
      "ariaLabel": "Mixeditems",
      "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": "#"
    }
  ]
})  }}

Markup


<!-- menubar -->
<div id="small-items" class="c-menubar">
  <ul data-module="c-menubar" id="small-items-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="Menubar description">
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--sm mb-sm mr-sm"  " id="small-example-item-1">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitem</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitem">
                        <li role="menuitem" id="sub-small-example-item-1" data-option="sub-small-example-item-1" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 1
                        </li>
                        <li role="menuitem" id="sub-small-example-item-1-2" data-option="sub-small-example-item-1-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 2
                        </li>
                        <li role="menuitem" id="sub-small-example-item-1-3" data-option="sub-small-example-item-1-3" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--sm mb-sm mr-sm"  " id="small-example-item-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemcheckbox</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemcheckbox">
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-small-example-item-2" data-option="sub-small-example-item-2">
                          Subitem 1
                        </li>
                        <li role="menuitemcheckbox" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-small-example-item-2-2" data-option="sub-small-example-item-2-2">
                          Subitem 2
                        </li>
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-small-example-item-2-3" data-option="sub-small-example-item-2-3">
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--sm mb-sm mr-sm"  " id="small-example-item-3">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemradio</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemradio">
                        <li role="none">
                          <ul role="group" id="sub-small-example-item-3" data-option="sub-small-example-item-3" aria-label="group label">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-small-example-item-3" data-option="sub-sub-small-example-item-3">
                                  Radio 1
                                </li>
                                <li role="menuitemradio" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-small-example-item-3-2" data-option="sub-sub-small-example-item-3-2">
                                  Radio 2
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-small-example-item-3-3" data-option="sub-sub-small-example-item-3-3">
                                  Radio 3
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--sm mb-sm mr-sm"  " id="small-example-item-4">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Mixed items</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Mixeditems">
                        <li role="none">
                          <ul role="group" id="sub-small-example-item-4" data-option="sub-small-example-item-4" aria-label="Tamaño de letra">
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-small-example-item-4" data-option="sub-sub-small-example-item-4">
                                  Tamaño mayor
                                </li>
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-small-example-item-4-2" data-option="sub-sub-small-example-item-4-2">
                                  Tamaño menor
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-small-example-item-4-2" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-small-example-item-4-3" data-option="sub-small-example-item-4-3" aria-label="Estilo de letra">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-small-example-item-4-3" data-option="sub-sub-small-example-item-4-3">
                                  Negritas
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-small-example-item-4-3-2" data-option="sub-sub-small-example-item-4-3-2">
                                  Itálicas
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-small-example-item-4-4" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-small-example-item-4-5" data-option="sub-small-example-item-4-5" aria-label="Estilo de texto">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-small-example-item-4-5" data-option="sub-sub-small-example-item-4-5">
                                  Ninguno
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-small-example-item-4-5-2" data-option="sub-sub-small-example-item-4-5-2">
                                  Tachado
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-small-example-item-4-5-3" data-option="sub-sub-small-example-item-4-5-3">
                                  Subrayado
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a role="menuitem" id="small-example-item-6" href="#" class="c-menubar__button c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm"  >
              Menuitem solo
            </a>
        </li>
  </ul>
</div>
<!-- /menubar -->

Transparent

Using modifier classes in items

Show code

Macro

{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "id": "transparent-items",
  "idPrefix": "transparent-example",
  "ariaLabel": "Menubar description",
  "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": "Mixed items",
      "ariaLabel": "Mixeditems",
      "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": "#"
    }
  ]
})  }}

Markup


<!-- menubar -->
<div id="transparent-items" class="c-menubar">
  <ul data-module="c-menubar" id="transparent-items-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="Menubar description">
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--transparent mb-sm mr-sm"  " id="transparent-example-item-1">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitem</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitem">
                        <li role="menuitem" id="sub-transparent-example-item-1" data-option="sub-transparent-example-item-1" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 1
                        </li>
                        <li role="menuitem" id="sub-transparent-example-item-1-2" data-option="sub-transparent-example-item-1-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 2
                        </li>
                        <li role="menuitem" id="sub-transparent-example-item-1-3" data-option="sub-transparent-example-item-1-3" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--transparent mb-sm mr-sm"  " id="transparent-example-item-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemcheckbox</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemcheckbox">
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-transparent-example-item-2" data-option="sub-transparent-example-item-2">
                          Subitem 1
                        </li>
                        <li role="menuitemcheckbox" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-transparent-example-item-2-2" data-option="sub-transparent-example-item-2-2">
                          Subitem 2
                        </li>
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-transparent-example-item-2-3" data-option="sub-transparent-example-item-2-3">
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--transparent mb-sm mr-sm"  " id="transparent-example-item-3">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemradio</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemradio">
                        <li role="none">
                          <ul role="group" id="sub-transparent-example-item-3" data-option="sub-transparent-example-item-3" aria-label="group label">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-transparent-example-item-3" data-option="sub-sub-transparent-example-item-3">
                                  Radio 1
                                </li>
                                <li role="menuitemradio" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-transparent-example-item-3-2" data-option="sub-sub-transparent-example-item-3-2">
                                  Radio 2
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-transparent-example-item-3-3" data-option="sub-sub-transparent-example-item-3-3">
                                  Radio 3
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--transparent mb-sm mr-sm"  " id="transparent-example-item-4">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Mixed items</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Mixeditems">
                        <li role="none">
                          <ul role="group" id="sub-transparent-example-item-4" data-option="sub-transparent-example-item-4" aria-label="Tamaño de letra">
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-transparent-example-item-4" data-option="sub-sub-transparent-example-item-4">
                                  Tamaño mayor
                                </li>
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-transparent-example-item-4-2" data-option="sub-sub-transparent-example-item-4-2">
                                  Tamaño menor
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-transparent-example-item-4-2" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-transparent-example-item-4-3" data-option="sub-transparent-example-item-4-3" aria-label="Estilo de letra">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-transparent-example-item-4-3" data-option="sub-sub-transparent-example-item-4-3">
                                  Negritas
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-transparent-example-item-4-3-2" data-option="sub-sub-transparent-example-item-4-3-2">
                                  Itálicas
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-transparent-example-item-4-4" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-transparent-example-item-4-5" data-option="sub-transparent-example-item-4-5" aria-label="Estilo de texto">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-transparent-example-item-4-5" data-option="sub-sub-transparent-example-item-4-5">
                                  Ninguno
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-transparent-example-item-4-5-2" data-option="sub-sub-transparent-example-item-4-5-2">
                                  Tachado
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-transparent-example-item-4-5-3" data-option="sub-sub-transparent-example-item-4-5-3">
                                  Subrayado
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a role="menuitem" id="transparent-example-item-6" href="#" class="c-menubar__button c-menubar__button--transparent mb-sm mr-sm"  >
              Menuitem solo
            </a>
        </li>
  </ul>
</div>
<!-- /menubar -->

Header

In special cases, a special fixed header with a menubar could be useful.

Show code

Macro

{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "id": "header-items",
  "idPrefix": "header-example",
  "ariaLabel": "Menubar description",
  "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": "Mixed items",
      "ariaLabel": "Mixeditems",
      "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-black"
})  }}

Markup


<!-- menubar -->
<div id="header-items" class="c-menubar bg-black">
  <ul data-module="c-menubar" id="header-items-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="Menubar description">
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--header mr-base"  " id="header-example-item-1">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitem</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitem">
                        <li role="menuitem" id="sub-header-example-item-1" data-option="sub-header-example-item-1" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 1
                        </li>
                        <li role="menuitem" id="sub-header-example-item-1-2" data-option="sub-header-example-item-1-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 2
                        </li>
                        <li role="menuitem" id="sub-header-example-item-1-3" data-option="sub-header-example-item-1-3" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--header mr-base"  " id="header-example-item-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemcheckbox</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemcheckbox">
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-header-example-item-2" data-option="sub-header-example-item-2">
                          Subitem 1
                        </li>
                        <li role="menuitemcheckbox" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-header-example-item-2-2" data-option="sub-header-example-item-2-2">
                          Subitem 2
                        </li>
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-header-example-item-2-3" data-option="sub-header-example-item-2-3">
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--header mr-base"  " id="header-example-item-3">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemradio</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemradio">
                        <li role="none">
                          <ul role="group" id="sub-header-example-item-3" data-option="sub-header-example-item-3" aria-label="group label">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-header-example-item-3" data-option="sub-sub-header-example-item-3">
                                  Radio 1
                                </li>
                                <li role="menuitemradio" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-header-example-item-3-2" data-option="sub-sub-header-example-item-3-2">
                                  Radio 2
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-header-example-item-3-3" data-option="sub-sub-header-example-item-3-3">
                                  Radio 3
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--header mr-base"  " id="header-example-item-4">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Mixed items</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Mixeditems">
                        <li role="none">
                          <ul role="group" id="sub-header-example-item-4" data-option="sub-header-example-item-4" aria-label="Tamaño de letra">
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-header-example-item-4" data-option="sub-sub-header-example-item-4">
                                  Tamaño mayor
                                </li>
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-header-example-item-4-2" data-option="sub-sub-header-example-item-4-2">
                                  Tamaño menor
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-header-example-item-4-2" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-header-example-item-4-3" data-option="sub-header-example-item-4-3" aria-label="Estilo de letra">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-header-example-item-4-3" data-option="sub-sub-header-example-item-4-3">
                                  Negritas
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-header-example-item-4-3-2" data-option="sub-sub-header-example-item-4-3-2">
                                  Itálicas
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-header-example-item-4-4" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-header-example-item-4-5" data-option="sub-header-example-item-4-5" aria-label="Estilo de texto">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-header-example-item-4-5" data-option="sub-sub-header-example-item-4-5">
                                  Ninguno
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-header-example-item-4-5-2" data-option="sub-sub-header-example-item-4-5-2">
                                  Tachado
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-header-example-item-4-5-3" data-option="sub-sub-header-example-item-4-5-3">
                                  Subrayado
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a role="menuitem" id="header-example-item-6" href="#" class="c-menubar__button c-menubar__button--header mr-base"  >
              Menuitem solo
            </a>
        </li>
  </ul>
</div>
<!-- /menubar -->

Filter example

Used over a list of items to filter and order them. Using .c-menubar--last-right modifier to position last item to right over lg: breakpoint.

Show code

Macro

{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "id": "filter-items",
  "idPrefix": "filter-example",
  "ariaLabel": "Menubar description",
  "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"
})  }}

Markup


<!-- menubar -->
<div id="filter-items" class="c-menubar c-menubar--last-right">
  <ul data-module="c-menubar" id="filter-items-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="Menubar description">
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--sm mb-sm mr-sm"  " id="filter-example-item-2">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Estados y trámites</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Estados y trámites">
                        <li role="none">
                          <ul role="group" id="sub-filter-example-item-2" data-option="sub-filter-example-item-2" aria-label="Filtrar">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-2" data-option="sub-sub-filter-example-item-2">
                                  Filtrar servicios
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-2-2" data-option="sub-sub-filter-example-item-2-2">
                                  Filtrar procesos y convocatorias
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-filter-example-item-2-2" class="my-sm border-b border-neutral-base">
                        </li>
                      <li role="none" id="sub-filter-example-item-2-3" data-option="sub-filter-example-item-2-3">
                        <span class="inline-block px-base py-sm text-neutral-dark focus:outline-none">Estados</span>
                      </li>
                        <li role="none">
                          <ul role="group" id="sub-filter-example-item-2-4" data-option="sub-filter-example-item-2-4" aria-label="Estados">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-2-4" data-option="sub-sub-filter-example-item-2-4">
                                  Borrador
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-2-4-2" data-option="sub-sub-filter-example-item-2-4-2">
                                  Borrador rechazado
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-2-4-3" data-option="sub-sub-filter-example-item-2-4-3">
                                  En validación
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-2-4-4" data-option="sub-sub-filter-example-item-2-4-4">
                                  Publicado
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-2-4-5" data-option="sub-sub-filter-example-item-2-4-5">
                                  Con cambios
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-2-4-6" data-option="sub-sub-filter-example-item-2-4-6">
                                  Dados de baja
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-filter-example-item-2-5" class="my-sm border-b border-neutral-base">
                        </li>
                      <li role="none" id="sub-filter-example-item-2-6" data-option="sub-filter-example-item-2-6">
                        <span class="inline-block px-base py-sm text-neutral-dark focus:outline-none">Plazos (sólo aplican a convocatorias y procesos)</span>
                      </li>
                        <li role="none">
                          <ul role="group" id="sub-filter-example-item-2-7" data-option="sub-filter-example-item-2-7" aria-label="Plazos (sólo aplican a convocatorias y procesos)">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-2-7" data-option="sub-sub-filter-example-item-2-7">
                                  Plazo permanente
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-2-7-2" data-option="sub-sub-filter-example-item-2-7-2">
                                  Plazo temporal indefinido
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-2-7-3" data-option="sub-sub-filter-example-item-2-7-3">
                                  Plazo temporal abierto
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-2-7-4" data-option="sub-sub-filter-example-item-2-7-4">
                                  Plazo temporal finalizado
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--sm mb-sm mr-sm"  " id="filter-example-item-3">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Tipología</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Tipología">
                        <li role="none">
                          <ul role="group" id="sub-filter-example-item-3" data-option="sub-filter-example-item-3" aria-label="Filtrar por procedimiento">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3" data-option="sub-sub-filter-example-item-3">
                                  Procedimiento
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-2" data-option="sub-sub-filter-example-item-3-2">
                                  Servicio sin tramitación de procedimiento
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-filter-example-item-3-2" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-filter-example-item-3-3" data-option="sub-filter-example-item-3-3" aria-label="Filtrar por interno/externo">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-3" data-option="sub-sub-filter-example-item-3-3">
                                  Interno
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-3-2" data-option="sub-sub-filter-example-item-3-3-2">
                                  Externo
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-filter-example-item-3-4" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-filter-example-item-3-5" data-option="sub-filter-example-item-3-5" aria-label="Filtrar por común/específico">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-5" data-option="sub-sub-filter-example-item-3-5">
                                  Común, horizontal
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-5-2" data-option="sub-sub-filter-example-item-3-5-2">
                                  Específico, sectorial
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-5-3" data-option="sub-sub-filter-example-item-3-5-3">
                                  Específico de uso común
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-filter-example-item-3-6" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-filter-example-item-3-7" data-option="sub-filter-example-item-3-7" aria-label="Filtrar por tipo de inicio">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-7" data-option="sub-sub-filter-example-item-3-7">
                                  Inicio de oficio
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-7-2" data-option="sub-sub-filter-example-item-3-7-2">
                                  Inicio a instancia
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-filter-example-item-3-8" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-filter-example-item-3-9" data-option="sub-filter-example-item-3-9">
                          Con convocatorias
                        </li>
                        <li role="separator" id="sub-filter-example-item-3-10" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-filter-example-item-3-11" data-option="sub-filter-example-item-3-11">
                          Tramitación íntegra digital
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a role="menuitem" id="filter-example-item-6" href="#" class="c-menubar__button c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm"  >
              Eliminar filtros
            </a>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--sm mb-sm"  " id="filter-example-item-4">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Orden: Actividad reciente</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Orden: Actividad reciente">
                        <li role="none">
                          <ul role="group" id="sub-filter-example-item-4" data-option="sub-filter-example-item-4" aria-label="Tipos de ordenación">
                                <li role="menuitemradio" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-4" data-option="sub-sub-filter-example-item-4">
                                  Actividad reciente
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-4-2" data-option="sub-sub-filter-example-item-4-2">
                                  Publicación reciente
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-4-3" data-option="sub-sub-filter-example-item-4-3">
                                  Creación reciente
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-4-4" data-option="sub-sub-filter-example-item-4-4">
                                  Número de servicio (de mayor a menor)
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
  </ul>
</div>
<!-- /menubar -->

With label example

With label that explains this menu acts to other element. You can use classes: sr-only to show only for screen readers.

Label text goes here

Show code

Macro

{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
{{ componentMenubar({
  "id": "with-label-items",
  "idPrefix": "label-example",
  "ariaLabel": "Menubar description",
  "label": {
    "text": "Label text goes here"
  },
  "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": "Mixed items",
      "ariaLabel": "Mixeditems",
      "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": "#"
    }
  ]
})  }}

Markup


<!-- menubar -->
<div id="with-label-items" class="c-menubar">
    <div id="with-label-items-label" class="mb-sm">
        <p>Label text goes here</p>
    </div>
  <ul data-module="c-menubar" id="with-label-items-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="Menubar description" aria-describedby="with-label-items-label">
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-example-item-1-3">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitem</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitem">
                        <li role="menuitem" id="sub-menuitems-example-item-1-3" data-option="sub-menuitems-example-item-1-3" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 1
                        </li>
                        <li role="menuitem" id="sub-menuitems-example-item-1-3-2" data-option="sub-menuitems-example-item-1-3-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 2
                        </li>
                        <li role="menuitem" id="sub-menuitems-example-item-1-3-3" data-option="sub-menuitems-example-item-1-3-3" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-example-item-2-3">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemcheckbox</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemcheckbox">
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-example-item-2-3" data-option="sub-menuitems-example-item-2-3">
                          Subitem 1
                        </li>
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-example-item-2-3-2" data-option="sub-menuitems-example-item-2-3-2">
                          Subitem 2
                        </li>
                        <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-menuitems-example-item-2-3-3" data-option="sub-menuitems-example-item-2-3-3">
                          Subitem 3
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-example-item-3-3">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Menuitemradio</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Menuitemradio">
                        <li role="none">
                          <ul role="group" id="sub-menuitems-example-item-3-3" data-option="sub-menuitems-example-item-3-3" aria-label="group label">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-3-3" data-option="sub-sub-menuitems-example-item-3-3">
                                  Radio 1
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-3-3-2" data-option="sub-sub-menuitems-example-item-3-3-2">
                                  Radio 2
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-3-3-3" data-option="sub-sub-menuitems-example-item-3-3-3">
                                  Radio 3
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button mb-base mr-base"  " id="menuitems-example-item-4-3">
              <span class="inline-flex self-center max-w-xs align-middle truncate">Mixed items</span>
                <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></a>
            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Mixeditems">
                        <li role="none">
                          <ul role="group" id="sub-menuitems-example-item-4-3" data-option="sub-menuitems-example-item-4-3" aria-label="Tamaño de letra">
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-3" data-option="sub-sub-menuitems-example-item-4-3">
                                  Tamaño mayor
                                </li>
                                <li role="menuitem" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-3-2" data-option="sub-sub-menuitems-example-item-4-3-2">
                                  Tamaño menor
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-menuitems-example-item-4-3-2" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-menuitems-example-item-4-3-3" data-option="sub-menuitems-example-item-4-3-3" aria-label="Estilo de letra">
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-3-3" data-option="sub-sub-menuitems-example-item-4-3-3">
                                  Negritas
                                </li>
                                <li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-3-3-2" data-option="sub-sub-menuitems-example-item-4-3-3-2">
                                  Itálicas
                                </li>
                          </ul>
                        </li>
                        <li role="separator" id="sub-menuitems-example-item-4-3-4" class="my-sm border-b border-neutral-base">
                        </li>
                        <li role="none">
                          <ul role="group" id="sub-menuitems-example-item-4-3-5" data-option="sub-menuitems-example-item-4-3-5" aria-label="Estilo de texto">
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-3-5" data-option="sub-sub-menuitems-example-item-4-3-5">
                                  Ninguno
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-3-5-2" data-option="sub-sub-menuitems-example-item-4-3-5-2">
                                  Tachado
                                </li>
                                <li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-menuitems-example-item-4-3-5-3" data-option="sub-sub-menuitems-example-item-4-3-5-3">
                                  Subrayado
                                </li>
                          </ul>
                        </li>
            </ul>
        </li>
        <li class="relative" role="none">
            <a role="menuitem" id="menuitems-example-item-6-3" href="#" class="c-menubar__button c-menubar__button--transparent mb-base mr-base"  >
              Menuitem solo
            </a>
        </li>
  </ul>
</div>
<!-- /menubar -->