Skip to main contentSkip to site searchSkip to component search
Honeycomb

Header widgets

Header slot area for adding other navigational parts like the language switcher and the user widget.

A container for widgets that shows on the right side of the header and you can use it to add any component you like, for example:

  • the language switcher,
  • a site wide search field
  • the user profile menu
  • phone numbers

The header widgets container should be the last element inside of the header. It has a very narrow width, 2 columns (of the 12 column grid), so use it wisely and plan accordingly since on smaller screens it can be quite limiting.

By default, the widgets container is hidden on small screens (xs breakpoint) but you can disable responsive rendering by adding the flix-header-widgets--no-responsive-rendering modifier to the element.

Language switcher

The header widgets area is the perfect place to add the language switcher component:

Honeycomb Logo 
<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <div class="flix-header-brand flix-header-brand--square">
      <a class="flix-header-brand__link" href="/">
        <img class="flix-header-brand__img" width="36" height="36" src="/img/logos/svg/honeycomb-white.svg" alt="Honeycomb Logo"/>
      </a>
    </div>
    
    <div class="flix-header-widgets flix-header-widgets--no-responsive-rendering">
      <div class="flix-language-switcher">
        <button type="button" class="flix-language-switcher__toggle" data-popup="language-selection-popup-1" data-firstfocusable="close-button" data-lastfocusable="last-focusable-item">
          <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/de.svg" alt="Germany"/>
          Deutsch
          <span class="flix-sr-only">Open language selection</span>
        </button>
      </div>
    </div>
    
  </div>
</header>

<div id="language-selection-popup-1" class="flix-language-switcher-popup" aria-label="Language selection" hidden="">
  <div class="flix-language-switcher-popup__body">
    <button type="button" id="close-button" aria-label="Close language selection" class="flix-language-switcher-popup__close flix-btn flix-btn--square flix-btn--sm flix-btn--link"></button>
    <section aria-labelledby="suggested-domains" class="flix-language-switcher-popup__region">
      <h2 class="flix-h4 flix-h4--section-header" id="suggested-domains">Suggested domains</h2>
      <ul class="flix-language-switcher-popup__list">
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" aria-current="true">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/de.svg" alt="Germany"/>
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/eu.svg" alt="European Union"/>
            English
          </a>
        </li>
      </ul>
    </section>
    <section aria-labelledby="europe-domains" class="flix-language-switcher-popup__region">
      <h2 class="flix-h4 flix-h4--section-header" id="europe-domains">Europe</h2>
      <ul class="flix-language-switcher-popup__list">
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="de">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/de.svg" alt="Germany"/>
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="de-ch">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/ch.svg" alt="Switzerland"/>
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="de-at">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/at.svg" alt="Austria"/>
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="en-gb">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/gb.svg" alt="England"/>
            English
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="es">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/es.svg" alt="Spain"/>
            Español
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="fr">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/fr.svg" alt="France"/>
            Français
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="fr-ch">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/ch.svg" alt="Switzerland"/>
            Français
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="fr-be">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/be.svg" alt="Belgium"/>
            Français
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="it">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/it.svg" alt="Italy"/>
            Italiano
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="it-ch">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/ch.svg" alt="Switzerland"/>
            Italiano
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="pl">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/pl.svg" alt="Poland"/>
            Polski
          </a><a class="flix-language-switcher-popup__link" href="#" lang="pt-pt">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/pt.svg" alt="Portugal"/>
            Português
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="rs">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/rs.svg" alt="Serbia"/>
            Srpski
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="fi">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/fi.svg" alt="Finland"/>
            Suomi
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="se">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/se.svg" alt="Sweden"/>
            Svenska
          </a>
        </li>
      </ul>
      <ul class="flix-language-switcher-popup__list">
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="ua">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/ua.svg" alt="Ukraine"/>
            Укpaїнcькa
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="mk">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/mk.svg" alt="Macedonia"/>
            Македонски
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="bg">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/bg.svg" alt="Bulgaria"/>
            Български
          </a>
        </li>
      </ul>
    </section>
    <section aria-labelledby="america-domains" class="flix-language-switcher-popup__region">
      <h2 class="flix-h4 flix-h4--section-header" id="america-domains">North &amp; South America</h2>
      <ul class="flix-language-switcher-popup__list">
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="en-us">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/us.svg" alt="United States"/>
            English
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="es-us">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/us.svg" alt="United States"/>
            Español
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="zh-us">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/us.svg" alt="United States"/>
            中文
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="en-ca">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/ca.svg" alt="Canada"/>
            English
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="fr-ca">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/ca.svg" alt="Canada"/>
            Français
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" id="last-focusable-item" href="#" lang="pt-br">
            <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/1.0.0/svg/br.svg" alt="Brasil"/>
            Português
          </a>
        </li>
      </ul>
    </section>
  </div>
  <div class="flix-overlay"></div>
</div>

User profile widget

Honeycomb offers the user profile widget that can be used to display user profile in the widgets container.

The component is essentially a dropdown that has been adapted to be used inside of the header. The navigation reuses the header navigation markup and class names to ensure visual consistency.

You can rely on the dropdown plugin to handle the attributes and toggling.

Notice that the nav landmark creates a contextualized user navigation, but in order for it to work correctly for screen readers it requires an aria-label or aria-labelledby attribute. That can be the user name.

You can use the --left modifier on the flix-header-sub-nav element to make the user sub menu expand to the left (aligning at the right of the edge of the header).

Notice: This widget is not optimized to be used on the hamburger menu panel widget container.

Honeycomb Logo 
<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <div class="flix-header-brand flix-header-brand--square">
      <a class="flix-header-brand__link" href="/">
        <img class="flix-header-brand__img" width="36" height="36" src="/img/logos/svg/honeycomb-white.svg" alt="Honeycomb Logo"/>
      </a>
    </div>
    
    <div class="flix-header-widgets">
      <nav aria-label="John Doe" class="flix-header-user-widget">
        <a class="flix-avatar" href="#">
          <img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
        </a>
        <button type="button" aria-label="Open user menu" class="flix-header-user-widget__toggle" data-dropdown="user-menu" data-event="hover">
          John Doe
        </button>
        <ul id="user-menu" class="flix-header-nav-subnav flix-header-nav-subnav--left" hidden="">
          <li class="flix-header-nav-subnav__item">
            <a class="flix-header-nav-subnav__link" href="/">
              <span class="flix-header-nav-subnav__text">Profile</span>
            </a>
          </li>
          <li class="flix-header-nav-subnav__item">
            <a class="flix-header-nav-subnav__link" href="/">
              <span class="flix-header-nav-subnav__text">Logout</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
    
  </div>
</header>

When the user is not logged in and you don't have a dropdown menu yet, you can simplify the markup to have just a link or button to go to the login page or open a login popup. In this case you don't need the nav landmark, since there is no navigation in place yet. E.g.:

Honeycomb Logo
Picture of John Doe Login 
<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <div class="flix-header-brand flix-header-brand--square">
      <a class="flix-header-brand__link" href="/">
        <img class="flix-header-brand__img" width="36" height="36" src="/img/logos/svg/honeycomb-white.svg" alt="Honeycomb Logo"/>
      </a>
    </div>
    
    <div class="flix-header-widgets">
      <div class="flix-header-user-widget">
        <span class="flix-avatar">
          <img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
        </span>
        <a class="flix-header-user-widget__toggle" href="#">
          Login
        </a>
      </div>
    </div>
    
  </div>
</header>

Making it work without the plugin

The dropdown plugin ensures all the ARIA attributes are set correctly and handles toggling the menu correctly. If you don't want to use the plugin and prefers controlling the toggling yourself, follow these instructions to ensure the dropdown works correctly and is accessible:

  • Add an id to the dropdown list and the hidden attribute;
  • To the toggle button, add the following attributes:
    • aria-controls="{the-dropdown-id}"
    • aria-haspopup="menu"
    • aria-expanded="false"

This will initiate the dropdown on a hidden state.

To show the dropdown, do:

  • Remove the hidden attribute from the dropdown list;
  • Switch the aria-expanded value from "false" to "true"

This will make the dropdown visible and navigable through tabbing.

The hidden attribute is important to hide the component from the tab order and the accessibility tree, effectively hiding it and making it impossible to be interacted with.

The aria-expanded attribute informs assistive technologies of the state of the component.

The CSS styles to show and hide the dropdown list are attached to the correct implementation of these attributes.

Honeycomb Logo 
<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <div class="flix-header-brand flix-header-brand--square">
      <a class="flix-header-brand__link" href="/">
        <img class="flix-header-brand__img" width="36" height="36" src="/img/logos/svg/honeycomb-white.svg" alt="Honeycomb Logo"/>
      </a>
    </div>
    
    <div class="flix-header-widgets">
      <nav aria-label="John Doe" class="flix-header-user-widget">
        <a class="flix-avatar" href="#">
          <img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
        </a>
        <button type="button" aria-label="Open user menu" class="flix-header-user-widget__toggle" aria-controls="user-menu-2" aria-haspopup="menu" aria-expanded="true">
          John Doe
        </button>
        <ul id="user-menu-2" class="flix-header-nav-subnav flix-header-nav-subnav--left">
          <li class="flix-header-nav-subnav__item">
            <a class="flix-header-nav-subnav__link" href="/">
              <span class="flix-header-nav__text">Profile</span>
            </a>
          </li>
          <li class="flix-header-nav-subnav__item">
            <a class="flix-header-nav-subnav__link" href="/">
              <span class="flix-header-nav__text">Logout</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
    
  </div>
</header>