Minimal Header
The minimal header can be used in SPAs or generally, when the content is presented in an app-like manner.
To ensure consistent behavior, the content should be inserted into a div with the e-container class, while giving the user control over the vertical styling (see the "Minimal Header with Content" demo below).
please make sure to embed the
minimalHeader component, always in a wrapper which has the position: relative CSS attribute.
This component works with all its features only in browsers that have support for the
If you need to run this component in a browser with no support for the
:has CSS selector. Please refer to the
reference on MDN.
If you need to run this component in a browser with no support for the
:has CSS selector, please use the
FROK Release 3.6.x.
component variations
Minimal Header
This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
<header class="o-minimal-header -primary">
<div class="o-minimal-header__supergraphic"></div>
<div class="o-minimal-header__top">
<div class="o-minimal-header__burger">
<button
type="button"
class="a-button a-button--integrated -without-label"
aria-label="Side Navigation"
>
<i class="a-icon a-button__icon ui-ic-menu"></i>
</button>
</div>
<div class="o-minimal-header__title">Page Name Lorem Ipsum</div>
<ul class="o-minimal-header__actions">
<li>
<button
type="button"
class="a-button a-button--integrated -without-label"
data-frok-action="#"
aria-label="Action 1"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-emoji-happy"></i>
</button>
</li>
<li>
<button
type="button"
class="a-button a-button--integrated -without-label"
data-frok-action="#"
aria-label="Action 2"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-emoji-happy"></i>
</button>
</li>
<li>
<button
type="button"
class="a-button a-button--integrated -without-label"
data-frok-action="#"
aria-label="Action 3"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-emoji-happy"></i>
</button>
</li>
<li>
<button
type="button"
class="a-button a-button--integrated -without-label"
data-frok-action="#"
aria-label="Action 4"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-emoji-happy"></i>
</button>
</li>
<li>
<button
type="button"
class="a-button a-button--integrated -without-label"
data-frok-action="#"
aria-label="Action 5"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-emoji-happy"></i>
</button>
</li>
</ul>
<a href="/" class="o-minimal-header__logo" aria-label="Bosch Logo">
<svg
width="108px"
height="24px"
viewBox="0 0 108 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="bosch-logo-text"
d="M78.19916,15.03735c0,3.46057-3.1618,5.1535-6.12445,5.1535c-3.41083,0-5.17847-1.29462-6.57263-2.96265 l2.51453-2.48962c1.07056,1.36926,2.46472,2.0415,4.0083,2.0415c1.29462,0,2.14105-0.62244,2.14105-1.56848 c0-0.99585-0.77179-1.31952-2.83813-1.74274l-0.54773-0.12451c-2.48962-0.52283-4.53113-1.91699-4.53113-4.75519 c0-3.112,2.53943-4.97925,5.87549-4.97925c2.8382,0,4.65564,1.21991,5.77594,2.48962l-2.46472,2.43988 c-0.82831-0.91748-2.00061-1.44946-3.23651-1.46893c-0.89624,0-1.91699,0.42328-1.91699,1.46893 c0,0.97095,1.07056,1.31946,2.41492,1.59332l0.54773,0.12451C75.51038,10.73029,78.24896,11.42737,78.19916,15.03735z M64.80499,11.92529c0,4.65558-2.66394,8.29047-7.26971,8.29047c-4.58093,0-7.26971-3.63489-7.26971-8.29047 c0-4.63068,2.68878-8.29047,7.26971-8.29047C62.14105,3.63483,64.80499,7.29462,64.80499,11.92529z M60.92114,11.92529 c0-2.46472-1.1452-4.48132-3.38586-4.48132s-3.36102,1.9917-3.36102,4.48132s1.12036,4.50623,3.36102,4.50623 S60.92114,14.43982,60.92114,11.92529z M87.06226,16.43152c-1.74274,0-3.56018-1.44397-3.56018-4.60583 c0-2.81323,1.69293-4.38171,3.46057-4.38171c1.39423,0,2.21576,0.64728,2.8631,1.76764l3.18671-2.11621 c-1.59338-2.41492-3.48547-3.43567-6.09961-3.43567c-4.78009,0-7.36926,3.70953-7.36926,8.19086 c0,4.70544,2.86304,8.39008,7.31946,8.39008c3.13696,0,4.63074-1.09546,6.24902-3.43567l-3.21167-2.16602 C89.25311,15.68463,88.55603,16.43152,87.06226,16.43152z M48.97095,15.46057c0,2.66388-2.43982,4.40662-4.92944,4.40662H35.9502 V4.0332h7.44397c2.8382,0,4.9046,1.44397,4.9046,4.35681c0.01666,1.43036-0.85675,2.72058-2.19086,3.23651 C46.10791,11.65143,48.97095,12.29877,48.97095,15.46057z M39.80914,10.25726h2.83813 c0.02155,0.00134,0.04309,0.00226,0.06464,0.00269c0.81476,0.01575,1.48804-0.6319,1.50385-1.44666 c0.00342-0.0567,0.00342-0.11353,0-0.17017c-0.047-0.77802-0.71576-1.37061-1.49377-1.32361h-2.88794L39.80914,10.25726z M44.76349,14.98755c0-0.92114-0.67218-1.54358-2.09131-1.54358h-2.81323v3.11206h2.88794 C43.91699,16.55603,44.76349,16.13275,44.76349,14.98755z M103.64313,4.03326v5.82568H98.8382V4.03326h-4.15771v15.83398h4.15771 v-6.24896h4.80493v6.24896h4.15771V4.03326H103.64313z"
/>
<path
id="bosch-logo-anker"
d="M12,0C5.37256,0,0,5.37256,0,12c0,6.62738,5.37256,12,12,12s12-5.37262,12-12C23.99646,5.37402,18.62598,0.00354,12,0z M12,22.87964C5.99133,22.87964,1.12036,18.00867,1.12036,12S5.99133,1.1203,12,1.1203S22.87964,5.99133,22.87964,12 C22.87354,18.0061,18.0061,22.87354,12,22.87964z M19.50293,7.05475c-0.66852-1.01306-1.53552-1.88-2.54858-2.54852h-0.82159 v4.10785H7.89209V4.50623H7.04565c-4.13873,2.73114-5.27972,8.30029-2.54858,12.43896 c0.66852,1.01306,1.53552,1.88007,2.54858,2.54858h0.84644v-4.10791h8.24066v4.10791h0.82159 C21.09308,16.76257,22.23407,11.19348,19.50293,7.05475z M6.74689,17.87549c-3.24493-2.88354-3.5379-7.85168-0.65436-11.09668 c0.20508-0.23077,0.42358-0.44928,0.65436-0.65436V17.87549z M16.13275,14.24066H7.89209V9.73444h8.24066V14.24066z M17.84827,17.25549c-0.18768,0.2088-0.38629,0.40747-0.59515,0.59509v-2.48962V8.61407V6.12445 C20.49121,9.03387,20.75763,14.0174,17.84827,17.25549z"
/>
</svg>
</a>
<div class="o-minimal-header__falafel">
<nav
class="o-context-menu"
aria-label="Context Menu Navigation undefined"
aria-hidden="false"
>
<button
type="button"
class="a-button a-button--integrated -without-label o-context-menu__trigger"
data-frok-action="open"
aria-haspopup="true"
aria-label="Open Context Menu"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-options"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label o-context-menu__trigger"
data-frok-action="close"
aria-haspopup="false"
aria-label="Close Context Menu"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-close"></i>
</button>
<div class="m-popover">
<div class="a-box -floating">
<div class="m-popover__content">
<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-emoji-happy"></i>
<span class="a-menu-item__label">Action 1</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-emoji-happy"></i>
<span class="a-menu-item__label">Action 2</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-emoji-happy"></i>
<span class="a-menu-item__label">Action 3</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-emoji-happy"></i>
<span class="a-menu-item__label">Action 4</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-emoji-happy"></i>
<span class="a-menu-item__label">Action 5</span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</header>
<nav
class="m-side-navigation -contrast"
aria-label="Side Navigation"
aria-hidden="false"
>
<div class="m-side-navigation__header">
<div class="m-side-navigation__header__label -size-l highlight">
App name
</div>
<button
type="button"
class="a-button a-button--integrated -without-label m-side-navigation__header__trigger -open"
aria-haspopup="false"
aria-label="Open Side Navigation"
tabindex="0"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-list-view-mobile"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-side-navigation__header__trigger -close"
aria-haspopup="false"
aria-label="Close Side Navigation"
tabindex="-1"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-close"></i>
</button>
</div>
<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>
</nav>Minimal Header with Content
This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
<div style="position:relative">
<header class="o-minimal-header -primary">
<div class="o-minimal-header__supergraphic"></div>
<div class="o-minimal-header__top">
<div class="o-minimal-header__burger">
<button
type="button"
class="a-button a-button--integrated -without-label"
aria-label="Side Navigation"
>
<i class="a-icon a-button__icon ui-ic-menu"></i>
</button>
</div>
<div class="o-minimal-header__title">Page Name Lorem Ipsum</div>
<ul class="o-minimal-header__actions">
<li>
<button
type="button"
class="a-button a-button--integrated -without-label"
data-frok-action="#"
aria-label="Action 1"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-emoji-happy"></i>
</button>
</li>
<li>
<button
type="button"
class="a-button a-button--integrated -without-label"
data-frok-action="#"
aria-label="Action 2"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-emoji-happy"></i>
</button>
</li>
<li>
<button
type="button"
class="a-button a-button--integrated -without-label"
data-frok-action="#"
aria-label="Action 3"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-emoji-happy"></i>
</button>
</li>
<li>
<button
type="button"
class="a-button a-button--integrated -without-label"
data-frok-action="#"
aria-label="Action 4"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-emoji-happy"></i>
</button>
</li>
<li>
<button
type="button"
class="a-button a-button--integrated -without-label"
data-frok-action="#"
aria-label="Action 5"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-emoji-happy"></i>
</button>
</li>
</ul>
<a href="/" class="o-minimal-header__logo" aria-label="Bosch Logo">
<svg
width="108px"
height="24px"
viewBox="0 0 108 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="bosch-logo-text"
d="M78.19916,15.03735c0,3.46057-3.1618,5.1535-6.12445,5.1535c-3.41083,0-5.17847-1.29462-6.57263-2.96265 l2.51453-2.48962c1.07056,1.36926,2.46472,2.0415,4.0083,2.0415c1.29462,0,2.14105-0.62244,2.14105-1.56848 c0-0.99585-0.77179-1.31952-2.83813-1.74274l-0.54773-0.12451c-2.48962-0.52283-4.53113-1.91699-4.53113-4.75519 c0-3.112,2.53943-4.97925,5.87549-4.97925c2.8382,0,4.65564,1.21991,5.77594,2.48962l-2.46472,2.43988 c-0.82831-0.91748-2.00061-1.44946-3.23651-1.46893c-0.89624,0-1.91699,0.42328-1.91699,1.46893 c0,0.97095,1.07056,1.31946,2.41492,1.59332l0.54773,0.12451C75.51038,10.73029,78.24896,11.42737,78.19916,15.03735z M64.80499,11.92529c0,4.65558-2.66394,8.29047-7.26971,8.29047c-4.58093,0-7.26971-3.63489-7.26971-8.29047 c0-4.63068,2.68878-8.29047,7.26971-8.29047C62.14105,3.63483,64.80499,7.29462,64.80499,11.92529z M60.92114,11.92529 c0-2.46472-1.1452-4.48132-3.38586-4.48132s-3.36102,1.9917-3.36102,4.48132s1.12036,4.50623,3.36102,4.50623 S60.92114,14.43982,60.92114,11.92529z M87.06226,16.43152c-1.74274,0-3.56018-1.44397-3.56018-4.60583 c0-2.81323,1.69293-4.38171,3.46057-4.38171c1.39423,0,2.21576,0.64728,2.8631,1.76764l3.18671-2.11621 c-1.59338-2.41492-3.48547-3.43567-6.09961-3.43567c-4.78009,0-7.36926,3.70953-7.36926,8.19086 c0,4.70544,2.86304,8.39008,7.31946,8.39008c3.13696,0,4.63074-1.09546,6.24902-3.43567l-3.21167-2.16602 C89.25311,15.68463,88.55603,16.43152,87.06226,16.43152z M48.97095,15.46057c0,2.66388-2.43982,4.40662-4.92944,4.40662H35.9502 V4.0332h7.44397c2.8382,0,4.9046,1.44397,4.9046,4.35681c0.01666,1.43036-0.85675,2.72058-2.19086,3.23651 C46.10791,11.65143,48.97095,12.29877,48.97095,15.46057z M39.80914,10.25726h2.83813 c0.02155,0.00134,0.04309,0.00226,0.06464,0.00269c0.81476,0.01575,1.48804-0.6319,1.50385-1.44666 c0.00342-0.0567,0.00342-0.11353,0-0.17017c-0.047-0.77802-0.71576-1.37061-1.49377-1.32361h-2.88794L39.80914,10.25726z M44.76349,14.98755c0-0.92114-0.67218-1.54358-2.09131-1.54358h-2.81323v3.11206h2.88794 C43.91699,16.55603,44.76349,16.13275,44.76349,14.98755z M103.64313,4.03326v5.82568H98.8382V4.03326h-4.15771v15.83398h4.15771 v-6.24896h4.80493v6.24896h4.15771V4.03326H103.64313z"
/>
<path
id="bosch-logo-anker"
d="M12,0C5.37256,0,0,5.37256,0,12c0,6.62738,5.37256,12,12,12s12-5.37262,12-12C23.99646,5.37402,18.62598,0.00354,12,0z M12,22.87964C5.99133,22.87964,1.12036,18.00867,1.12036,12S5.99133,1.1203,12,1.1203S22.87964,5.99133,22.87964,12 C22.87354,18.0061,18.0061,22.87354,12,22.87964z M19.50293,7.05475c-0.66852-1.01306-1.53552-1.88-2.54858-2.54852h-0.82159 v4.10785H7.89209V4.50623H7.04565c-4.13873,2.73114-5.27972,8.30029-2.54858,12.43896 c0.66852,1.01306,1.53552,1.88007,2.54858,2.54858h0.84644v-4.10791h8.24066v4.10791h0.82159 C21.09308,16.76257,22.23407,11.19348,19.50293,7.05475z M6.74689,17.87549c-3.24493-2.88354-3.5379-7.85168-0.65436-11.09668 c0.20508-0.23077,0.42358-0.44928,0.65436-0.65436V17.87549z M16.13275,14.24066H7.89209V9.73444h8.24066V14.24066z M17.84827,17.25549c-0.18768,0.2088-0.38629,0.40747-0.59515,0.59509v-2.48962V8.61407V6.12445 C20.49121,9.03387,20.75763,14.0174,17.84827,17.25549z"
/>
</svg>
</a>
<div class="o-minimal-header__falafel">
<nav
class="o-context-menu"
aria-label="Context Menu Navigation undefined"
aria-hidden="false"
>
<button
type="button"
class="a-button a-button--integrated -without-label o-context-menu__trigger"
data-frok-action="open"
aria-haspopup="true"
aria-label="Open Context Menu"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-options"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label o-context-menu__trigger"
data-frok-action="close"
aria-haspopup="false"
aria-label="Close Context Menu"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-close"></i>
</button>
<div class="m-popover">
<div class="a-box -floating">
<div class="m-popover__content">
<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-emoji-happy"></i>
<span class="a-menu-item__label">Action 1</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-emoji-happy"></i>
<span class="a-menu-item__label">Action 2</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-emoji-happy"></i>
<span class="a-menu-item__label">Action 3</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-emoji-happy"></i>
<span class="a-menu-item__label">Action 4</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-emoji-happy"></i>
<span class="a-menu-item__label">Action 5</span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</header>
<nav
class="m-side-navigation -contrast"
aria-label="Side Navigation"
aria-hidden="false"
>
<div class="m-side-navigation__header">
<div class="m-side-navigation__header__label -size-l highlight">
App name
</div>
<button
type="button"
class="a-button a-button--integrated -without-label m-side-navigation__header__trigger -open"
aria-haspopup="false"
aria-label="Open Side Navigation"
tabindex="0"
>
<i
class="a-icon a-button__icon boschicon-bosch-ic-list-view-mobile"
></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-side-navigation__header__trigger -close"
aria-haspopup="false"
aria-label="Close Side Navigation"
tabindex="-1"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-close"></i>
</button>
</div>
<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>
</nav>
<div class="e-container">
<main style="padding-top:6rem">
<div class="m-text-image">
<div class="a-text">
<h2>Text View h2 bold</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="m-text-image__order-wrapper">
<figure class="a-image">
<div class="a-image__ratioWrapper">
<img
src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
srcset="
https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg 400w,
https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg 800w,
https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
"
alt="Lorem ipsum dolor sit amet"
/>
</div>
<figcaption>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor.
</figcaption>
</figure>
<div class="a-text">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</p>
</div>
</div>
</div>
</main>
</div>
</div>additional content
styles SCSS
/* stylelint-disable selector-max-id */
@use "../header/parts/supergraphic.scss";
.o-minimal-header {
position: fixed;
z-index: 3;
background-color: var(--plain__enabled__fill__default);
width: 100%;
@include supergraphic-padding;
+ .m-side-navigation {
z-index: 3;
// reduce max height with the amount of the supergraphic, to ensure smooth scrolling
height: calc(100% - 6px);
min-height: calc(100vh - 6px);
@include supergraphic-margin;
&.-opening,
&.-open {
max-width: 100%;
}
}
&__supergraphic {
@include supergraphic;
}
&__top {
height: 3rem;
border-bottom: 1px solid var(--small__enabled__fill__default);
display: flex;
align-items: center;
justify-content: flex-end;
}
&__logo {
width: 8.75rem;
height: 3rem;
padding: 0.75rem 0.9375rem 0.75rem 1rem;
display: none;
order: 2;
#bosch-logo-text {
fill: #ea0016;
.-dark-mode & {
fill: var(--plain__enabled__front__default);
}
}
#bosch-logo-anker {
fill: var(--plain__enabled__front__default);
}
&:focus-visible {
@include focus-inside;
}
}
// Reset
&__actions {
margin-bottom: 0;
padding: 0;
li {
/* stylelint-disable-next-line a11y/content-property-no-static-value */
&::before {
content: none;
}
padding: 0;
margin: 0;
}
display: none;
.a-button__label {
white-space: nowrap;
}
}
&__title {
flex: 0 1 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include size-m;
font-weight: bold;
}
+ .e-container {
margin: 0 auto;
max-width: 25rem;
}
}
@include tablet-and-up {
.o-minimal-header {
&__actions {
display: flex;
margin-right: 1rem;
margin-left: 1rem;
}
&__falafel {
display: none;
}
&__logo {
display: block;
}
&__title {
@include size-l;
}
&:has(+ .m-side-navigation.-opening),
&:has(+ .m-side-navigation.-open) {
/* stylelint-disable-next-line selector-max-compound-selectors */
.o-minimal-header__top {
/* stylelint-disable-next-line selector-max-compound-selectors */
.o-minimal-header__actions {
display: none;
}
/* stylelint-disable-next-line selector-max-compound-selectors */
.o-minimal-header__falafel {
display: block;
order: 1;
margin-right: 1rem;
}
}
}
+ .e-container {
max-width: 35rem;
}
}
}
@include desktop-and-up {
.o-minimal-header {
&__title {
margin-inline-start: 5rem ;
}
&__burger {
display: none;
}
&__top {
transition: $default-transition-timing padding $default-transition-easing;
}
&:has(+ .m-side-navigation.-opening),
&:has(+ .m-side-navigation.-open) {
/* stylelint-disable-next-line selector-max-compound-selectors */
.o-minimal-header__top {
// the burger (48px) should still be hidden below the side navigation
padding-left: $m-side-navigation--open-width - 3rem;
/* stylelint-disable-next-line selector-max-compound-selectors */
.o-minimal-header__actions {
display: flex;
}
/* stylelint-disable-next-line selector-max-compound-selectors */
.o-minimal-header__falafel {
display: none;
}
}
}
+ .e-container {
max-width: 50rem;
}
}
}