menu group


component variations

Group Menu

<ul class="m-menu-group" role="menubar" aria-orientation="vertical">
  <li class="a-menu-item" role="none">
    <div class="a-menu-item__wrapper">
      <a
        href="#"
        role="menuitem"
        class="a-menu-item__link"
        aria-disabled="false"
      >
        <i class="a-icon boschicon-bosch-ic-login"></i>
        <span class="a-menu-item__label">Login</span>
      </a>
    </div>
  </li>
  <li class="a-menu-item" role="none">
    <div class="a-menu-item__wrapper">
      <a
        href="#"
        role="menuitem"
        class="a-menu-item__link"
        aria-disabled="false"
      >
        <i class="a-icon boschicon-bosch-ic-chat"></i>
        <span class="a-menu-item__label">Contact</span>
      </a>
    </div>
  </li>
  <li class="a-menu-item" role="none">
    <div class="a-menu-item__wrapper">
      <button
        type="button"
        role="menuitem"
        class="a-menu-item__group"
        aria-disabled="false"
        aria-controls="group-id-1"
        aria-label="open group"
      >
        <i class="a-icon boschicon-bosch-ic-battery-0"></i>
        <span class="a-menu-item__label">Group</span>
        <i class="a-icon ui-ic-down-small"></i>
      </button>
    </div>
    <ul id="group-id-1" class="m-menu-group__group" role="menu">
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <a
            href="#"
            role="menuitem"
            class="a-menu-item__link"
            aria-disabled="false"
          >
            <span class="a-menu-item__label">label 1</span>
          </a>
        </div>
      </li>
      <li class="a-menu-item -disabled -indent" role="none">
        <div class="a-menu-item__wrapper">
          <a
            href="#"
            role="menuitem"
            class="a-menu-item__link"
            aria-disabled="true"
            tabindex="-1"
          >
            <span class="a-menu-item__label">label 2</span>
          </a>
        </div>
      </li>
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <a
            href="#"
            role="menuitem"
            class="a-menu-item__link"
            aria-disabled="false"
          >
            <span class="a-menu-item__label">label 3</span>
          </a>
        </div>
      </li>
    </ul>
  </li>
  <li class="a-menu-item -disabled" role="none">
    <div class="a-menu-item__wrapper">
      <button
        type="button"
        role="menuitem"
        class="a-menu-item__group"
        aria-disabled="true"
        tabindex="-1"
        aria-controls="group-id-2"
        aria-label="open group"
      >
        <i class="a-icon boschicon-bosch-ic-bicycle-e"></i>
        <span class="a-menu-item__label">
          Group 2 with some extended labels
        </span>
        <i class="a-icon ui-ic-down-small"></i>
      </button>
    </div>
    <ul id="group-id-2" class="m-menu-group__group" role="menu">
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <a
            href="#"
            role="menuitem"
            class="a-menu-item__link"
            aria-disabled="false"
          >
            <span class="a-menu-item__label">label 1</span>
          </a>
        </div>
      </li>
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <a
            href="#"
            role="menuitem"
            class="a-menu-item__link"
            aria-disabled="false"
          >
            <span class="a-menu-item__label">label 2</span>
          </a>
        </div>
      </li>
    </ul>
  </li>
  <li class="a-menu-item" role="none">
    <div class="a-menu-item__wrapper">
      <button
        type="button"
        role="menuitem"
        class="a-menu-item__group"
        aria-disabled="false"
        aria-controls="group-id-3"
        aria-label="open group"
      >
        <i class="a-icon boschicon-bosch-ic-agility"></i>
        <span class="a-menu-item__label">
          Group 3 with some extended labels
        </span>
        <i class="a-icon ui-ic-down-small"></i>
      </button>
    </div>
    <ul id="group-id-3" class="m-menu-group__group" role="menu">
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <a
            href="#"
            role="menuitem"
            class="a-menu-item__link"
            aria-disabled="false"
          >
            <span class="a-menu-item__label">label 1</span>
          </a>
        </div>
      </li>
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <a
            href="#"
            role="menuitem"
            class="a-menu-item__link"
            aria-disabled="false"
          >
            <span class="a-menu-item__label">label 2</span>
          </a>
        </div>
      </li>
    </ul>
  </li>
  <li class="a-menu-item" role="none">
    <div class="a-menu-item__wrapper">
      <a
        href="#"
        role="menuitem"
        class="a-menu-item__link"
        aria-disabled="false"
      >
        <i class="a-icon boschicon-bosch-ic-atom"></i>
        <span class="a-menu-item__label">atom</span>
      </a>
    </div>
  </li>
  <li class="a-menu-item -disabled" role="none">
    <div class="a-menu-item__wrapper">
      <a
        href="#"
        role="menuitem"
        class="a-menu-item__link"
        aria-disabled="true"
        tabindex="-1"
      >
        <i class="a-icon boschicon-bosch-ic-fax"></i>
        <span class="a-menu-item__label">fax</span>
      </a>
    </div>
  </li>
</ul>

Side Menu

<ul class="m-menu-group" role="menubar" aria-orientation="vertical">
  <div class="m-menu-group__section-header">
    <span class="highlight -size-s">Section header</span>
  </div>
  <li class="a-menu-item" role="none">
    <div class="a-menu-item__wrapper">
      <a
        href="#"
        role="menuitem"
        class="a-menu-item__link"
        aria-disabled="false"
      >
        <i class="a-icon boschicon-bosch-ic-login"></i>
        <span class="a-menu-item__label">Login</span>
      </a>
    </div>
  </li>
  <li class="a-menu-item" role="none">
    <div class="a-menu-item__wrapper">
      <a
        href="#"
        role="menuitem"
        class="a-menu-item__link"
        aria-disabled="false"
      >
        <i class="a-icon boschicon-bosch-ic-chat"></i>
        <span class="a-menu-item__label">Contact</span>
      </a>
    </div>
  </li>
  <li class="a-menu-item" role="none">
    <div class="a-menu-item__wrapper">
      <button
        type="button"
        role="menuitem"
        class="a-menu-item__side-menu"
        aria-disabled="false"
        aria-controls="group-id-1"
      >
        <i class="a-icon boschicon-bosch-ic-battery-0"></i>
        <span class="a-menu-item__label">Group</span>
        <i class="a-icon ui-ic-nosafe-lr-right-small"></i>
      </button>
    </div>
    <ul id="group-id-1" class="m-menu-group__flyout -floating" role="menu">
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <a
            href="#"
            role="menuitem"
            class="a-menu-item__link"
            aria-disabled="false"
          >
            <span class="a-menu-item__label">label 1</span>
          </a>
        </div>
      </li>
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <button
            type="button"
            role="menuitem"
            class="a-menu-item__button"
            aria-disabled="false"
          >
            <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
            <span class="a-menu-item__label">Label</span>
            <span class="a-menu-item__label">โ‡งโŒ˜ 4</span>
          </button>
        </div>
      </li>
      <li class="a-menu-item -disabled -indent" role="none">
        <div class="a-menu-item__wrapper">
          <a
            href="#"
            role="menuitem"
            class="a-menu-item__link"
            aria-disabled="true"
            tabindex="-1"
          >
            <span class="a-menu-item__label">label 2</span>
          </a>
        </div>
      </li>
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <a
            href="#"
            role="menuitem"
            class="a-menu-item__link"
            aria-disabled="false"
          >
            <span class="a-menu-item__label">label 3</span>
          </a>
        </div>
      </li>
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <i class="a-icon a-menu-item__state ui-ic-checkmark"></i>
          <button
            type="button"
            role="menuitem"
            class="a-menu-item__button"
            aria-disabled="false"
          >
            <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
            <span class="a-menu-item__label">Label</span>
            <span class="a-menu-item__label">โŒ˜+T</span>
          </button>
        </div>
      </li>
    </ul>
  </li>
  <li class="a-menu-item -disabled" role="none">
    <div class="a-menu-item__wrapper">
      <button
        type="button"
        role="menuitem"
        class="a-menu-item__side-menu"
        aria-disabled="true"
        tabindex="-1"
        aria-controls="group-id-2"
      >
        <i class="a-icon boschicon-bosch-ic-bicycle-e"></i>
        <span class="a-menu-item__label">
          Group 2 with some extended labels
        </span>
        <i class="a-icon ui-ic-nosafe-lr-right-small"></i>
      </button>
    </div>
    <ul id="group-id-2" class="m-menu-group__flyout -floating" role="menu">
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <a
            href="#"
            role="menuitem"
            class="a-menu-item__link"
            aria-disabled="false"
          >
            <span class="a-menu-item__label">label 1</span>
          </a>
        </div>
      </li>
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <a
            href="#"
            role="menuitem"
            class="a-menu-item__link"
            aria-disabled="false"
          >
            <span class="a-menu-item__label">label 2</span>
          </a>
        </div>
      </li>
    </ul>
  </li>
  <div class="m-menu-group__section-header">
    <hr class="a-divider" />
    <span class="highlight -size-s">Section header</span>
  </div>
  <li class="a-menu-item" role="none">
    <div class="a-menu-item__wrapper">
      <a
        href="/#"
        role="menuitem"
        class="a-menu-item__link"
        aria-disabled="false"
      >
        <span class="a-menu-item__label">Label</span>
        <span class="a-menu-item__label">Secondary text</span>
        <div class="a-badge" role="status" aria-live="off" data-count="1">
          5
        </div>
      </a>
    </div>
  </li>
  <hr class="a-divider" />
  <li class="a-menu-item" role="none">
    <div class="a-menu-item__wrapper">
      <button
        type="button"
        role="menuitem"
        class="a-menu-item__side-menu"
        aria-disabled="false"
        aria-controls="group-id-3"
      >
        <i class="a-icon boschicon-bosch-ic-agility"></i>
        <span class="a-menu-item__label">
          Group 3 with some extended labels
        </span>
        <i class="a-icon ui-ic-nosafe-lr-right-small"></i>
      </button>
    </div>
    <ul id="group-id-3" class="m-menu-group__flyout -floating" role="menu">
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <button
            type="button"
            role="menuitem"
            class="a-menu-item__button"
            aria-disabled="false"
          >
            <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
            <span class="a-menu-item__label">Label</span>
            <span class="a-menu-item__label">โ‡งโŒ˜ 4</span>
          </button>
        </div>
      </li>
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <a
            href="#"
            role="menuitem"
            class="a-menu-item__link"
            aria-disabled="false"
          >
            <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
            <span class="a-menu-item__label">Link</span>
            <div class="a-badge" role="status" aria-live="off" data-count="1">
              1
            </div>
          </a>
        </div>
      </li>
      <hr class="a-divider" />
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <button
            type="button"
            role="menuitem"
            class="a-menu-item__button"
            aria-disabled="false"
          >
            <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
            <span class="a-menu-item__label">Label</span>
            <span class="a-menu-item__label">โŒ˜+N</span>
          </button>
        </div>
      </li>
      <li class="a-menu-item -indent" role="none">
        <div class="a-menu-item__wrapper">
          <i class="a-icon a-menu-item__state ui-ic-checkmark"></i>
          <button
            type="button"
            role="menuitem"
            class="a-menu-item__button"
            aria-disabled="false"
          >
            <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
            <span class="a-menu-item__label">Label</span>
            <span class="a-menu-item__label">โŒ˜+T</span>
          </button>
        </div>
      </li>
    </ul>
  </li>
  <li class="a-menu-item" role="none">
    <div class="a-menu-item__wrapper">
      <a
        href="#"
        role="menuitem"
        class="a-menu-item__link"
        aria-disabled="false"
      >
        <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
        <span class="a-menu-item__label">Label</span>
        <span class="a-menu-item__label">Secondary text</span>
        <div class="a-badge" role="status" aria-live="off" data-count="3">
          new
        </div>
      </a>
    </div>
  </li>
  <li class="a-menu-item -disabled" role="none">
    <div class="a-menu-item__wrapper">
      <a
        href="#"
        role="menuitem"
        class="a-menu-item__link"
        aria-disabled="true"
        tabindex="-1"
      >
        <i class="a-icon boschicon-bosch-ic-fax"></i>
        <span class="a-menu-item__label">fax</span>
      </a>
    </div>
  </li>
</ul>

additional content

styles SCSS

.m-menu-group {
  position: relative;
  margin-bottom: 0;
  padding: 0;

  /* First Level Section */
  > .a-menu-item {
    padding: 0;

    // resets for both variants
    .m-menu-group__group,
    .m-menu-group__flyout {
      display: none;
      padding: 0;
      margin: 0;
    }
  }

  &__section-header {
    display: flex;
    height: 3rem;
    flex-direction: column;
    padding-block-start: 1.1875rem;
    padding-block-end: 0.6875rem;
    padding-inline: 0.875rem;

    &:has(> .a-divider) {
      padding-block-start: 0;
    }

    .a-divider {
      margin-block-end: 0.625rem;
    }
  }

  // side menu specific styles
  .m-menu-group__flyout {
    position: absolute;
    box-shadow: 0 0 0.5rem 0.01rem var(--shadow-fill);
    top: 0;
    left: calc(100% - 5px);
    width: 100%;
  }

  // open states
  .a-menu-item.-open {

    // open group
    .m-menu-group__group {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .a-icon.ui-ic-down-small {
      transform: rotate(180deg);
    }

    // open side menu
    .m-menu-group__flyout {
      display: block;
      z-index: 10;
    }
  }
}```