Application Bar Stable

The Application Bar is the area at the top of a website or solution that contains the branding, application name, overall user information and off-content functions.

Standard bar

<div class="application-bar application-bar--compact ">
  <div class="application-bar__container">
    <div class="application-bar__logo">
        <div class="logo logo--compact "></div>
    </div>
    <div class="application-bar__app-identifier">App Identifier</div>
    <div class="application-bar__additional-functions">
    </div>
    <div class="application-bar__meta-menu">
        <div class="meta-menu js-meta-menu">
            <ul class="bare-list meta-menu__list">
                <li class="meta-menu__item">
                    <a href="#" class="meta-menu__link">
                        <i class="icon-email"></i>
                        <span class="meta-menu__title">Contact</span>
                    </a>
                </li>
                <li class="meta-menu__item">
                    <button class="meta-menu__link">
                        <i class="icon-globe"></i>
                        <span class="meta-menu__title">Global</span>
                    </button>
                </li>
            </ul>
            <div class="dropdown dropdown--right js-dropdown">
                <button href="#" class="button button--control button--off-content dropdown__toggle meta-menu__toggle-button">
                    <i class="icon-dots-ellipsis-horizontal"></i>
                </button>
                <div class="dropdown__panel">
                    <ul class="menu meta-menu__hidden-list"></ul>
                </div>
            </div>
        </div>    </div>
    <div class="application-bar__user-identifier">
        <div class="user-identifier dropdown dropdown--right js-dropdown">
          <button class="user-identifier__toggle-button dropdown__toggle">
            <div class="user-identifier__avatar">
                <div class="user-identifier__initials">MM</div>
            </div>
            <span class="user-identifier__details">
              <span class="user-identifier__name">Markus Mustermann</span>
              <span class="user-identifier__company">Siemens Healthineers</span>
            </span>
          </button>
          <div class="menu dropdown__panel">
            <a class="menu__item" href="https://my.siemens-healthineers.com/profile">My Profile</a>
            <a class="menu__item" href="https://my.siemens-healthineers.com/">My Services</a>
            <a class="menu__item" href="#">Log Out</a>
          </div>
        </div>    </div>
  </div>
</div>

Marketing variant Deprecated

<div class="application-bar ">
  <div class="application-bar__container">
    <div class="application-bar__logo">
        <div class="logo "></div>
    </div>
    <div class="application-bar__app-identifier">Product Name</div>
    <div class="application-bar__additional-functions">
    </div>
    <div class="application-bar__meta-menu">
        <div class="meta-menu js-meta-menu">
            <ul class="bare-list meta-menu__list">
                <li class="meta-menu__item">
                    <a href="#" class="meta-menu__link">
                        <i class="icon-email"></i>
                        <span class="meta-menu__title">Contact</span>
                    </a>
                </li>
                <li class="meta-menu__item">
                    <button class="meta-menu__link">
                        <i class="icon-globe"></i>
                        <span class="meta-menu__title">Global</span>
                    </button>
                </li>
            </ul>
            <div class="dropdown dropdown--right js-dropdown">
                <button href="#" class="button button--control button--off-content dropdown__toggle meta-menu__toggle-button">
                    <i class="icon-dots-ellipsis-horizontal"></i>
                </button>
                <div class="dropdown__panel">
                    <ul class="menu meta-menu__hidden-list"></ul>
                </div>
            </div>
        </div>    </div>
    <div class="application-bar__user-identifier">
        <div class="user-identifier dropdown dropdown--right js-dropdown">
          <button class="user-identifier__toggle-button dropdown__toggle">
            <div class="user-identifier__avatar">
                <div class="user-identifier__initials">MM</div>
            </div>
            <span class="user-identifier__details">
              <span class="user-identifier__name">Markus Mustermann</span>
              <span class="user-identifier__company">Siemens Healthineers</span>
            </span>
          </button>
          <div class="menu dropdown__panel">
            <a class="menu__item" href="https://my.siemens-healthineers.com/profile">My Profile</a>
            <a class="menu__item" href="https://my.siemens-healthineers.com/">My Services</a>
            <a class="menu__item" href="#">Log Out</a>
          </div>
        </div>    </div>
  </div>
</div>