menu group
table of content
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;
}
}
}```