Header
The header provides branding (through color and logo), navigation, and a widget. It is always located at the very top of a page.
The header provides branding (through color and logo), navigation, and a widget. It is always located at the very top of a page.
By default the header is fixed but you can add the the flix-header--unfixed modifier class to make it scrollable with the rest of the content.
You can also stretch the header contents to occupy the whole screen by adding a flix-header--fullwidth modifier.
The header hides the navigation, widgets and burger menu depending on screen size.
Header contains 5 children components:
- Skip links are shortcuts for keyboard users and should always come first
- Brand holds your logo goodness
- Navigation are links for other pages in the web site
- Burger menu an expandable panel for mobile navigation
- Widgets for any extra functionality like site search, language switcher and user profile widget
The example bellow has a complete set of features for the header component. You may not need all of it, to learn more details about each component, use the links above to navigate to each component's documentation page.
Deutsch
English
Deutsch
Deutsch
English
Español
Français
Français
Italiano
Polski
Português
Srpski
Suomi
Svenska
Укpaїнcькa
Македонски
Български
English
English
Português
<header class="flix-header flix-header--unfixed">
<div class="flix-header__inner">
<div class="flix-header-skip-links">
<a class="flix-skip-link" href="#booking-details">
Skip to booking details
</a>
<a class="flix-skip-link" href="#language-selection">
Skip to language selection
</a>
</div>
<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>
<nav class="flix-header-nav" aria-label="Main">
<ul class="flix-header-nav__list">
<li class="flix-header-nav__item">
<a class="flix-header-nav__link" aria-current="page" href="/">
<i class="flix-icon flix-icon-home-solid" aria-hidden="true"></i>
<span class="flix-header-nav__text">My bookings</span>
</a>
</li>
<li class="flix-header-nav__item">
<button type="button" class="flix-header-nav__link" data-dropdown="flix-header-subnav">
<i class="flix-icon flix-icon-location-solid" aria-hidden="true"></i>
<span class="flix-header-nav__text">Plan trip</span>
</button>
<ul id="flix-header-subnav" class="flix-header-nav-subnav" hidden="">
<li class="flix-header-nav-subnav__item">
<a class="flix-header-nav-subnav__link" aria-current="page" href="/">
<i class="flix-icon flix-icon-trip-solid" aria-hidden="true"></i>
<span class="flix-header-nav-subnav__text">Route Network</span>
</a>
</li>
<li class="flix-header-nav-subnav__item">
<a class="flix-header-nav-subnav__link" href="/">
<i class="flix-icon flix-icon-pin" aria-hidden="true"></i>
<span class="flix-header-nav-subnav__text">Coach destination</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">Night buses</span>
</a>
</li>
</ul>
</li>
<li class="flix-header-nav__item">
<a class="flix-header-nav__link" href="/">
<i class="flix-icon flix-icon-real-time" aria-hidden="true"></i>
<span class="flix-header-nav__text">Real-time</span>
</a>
</li>
<li class="flix-header-nav__item">
<a class="flix-header-nav__link" href="/">
<span class="flix-header-nav__text">About Us</span>
</a>
</li>
</ul>
</nav>
<div class="flix-header-burger-menu">
<button type="button" aria-label="Open main site navigation" class="flix-header-burger-menu__toggle flix-btn flix-btn--link flix-btn--square flix-btn--md" aria-controls="menu-panel" aria-expanded="false"></button>
<div id="menu-panel" class="flix-header-burger-menu__panel" hidden="">
<button type="button" aria-label="Close main site navigation" class="flix-header-burger-menu__toggle flix-btn flix-btn--link flix-btn--square flix-btn--md" aria-controls="menu-panel" aria-expanded="true"></button>
<nav class="flix-header-burger-menu__nav" aria-label="Main">
<ul class="flix-header-burger-menu__list">
<li class="flix-header-burger-menu__item">
<a class="flix-header-burger-menu__link" aria-current="page" href="/">
<i class="flix-icon flix-icon-home-solid" aria-hidden="true"></i>
<span class="flix-header-burger-menu__text">My bookings</span>
</a>
</li>
<li class="flix-header-burger-menu__item">
<button type="button" class="flix-header-burger-menu__link" data-dropdown="flix-burger-subnav">
<i class="flix-icon flix-icon-location-solid" aria-hidden="true"></i>
<span class="flix-header-burger-menu__text">Plan trip</span>
</button>
<ul id="flix-burger-subnav" class="flix-header-burger-menu-subnav" hidden="">
<li class="flix-header-burger-menu-subnav__item">
<a class="flix-header-burger-menu-subnav__link" aria-current="page" href="/">
<i class="flix-icon flix-icon-trip-solid" aria-hidden="true"></i>
<span class="flix-header-burger-menu__text">Route Network</span>
</a>
</li>
<li class="flix-header-burger-menu-subnav__item">
<a class="flix-header-burger-menu-subnav__link" href="/">
<i class="flix-icon flix-icon-pin" aria-hidden="true"></i>
<span class="flix-header-burger-menu__text">Coach destination</span>
</a>
</li>
<li class="flix-header-burger-menu-subnav__item">
<a class="flix-header-burger-menu-subnav__link" href="/">
<span class="flix-header-burger-menu__text">Night buses</span>
</a>
</li>
</ul>
</li>
<li class="flix-header-burger-menu__item">
<a class="flix-header-burger-menu__link" href="/">
<i class="flix-icon flix-icon-real-time" aria-hidden="true"></i>
<span class="flix-header-burger-menu__text">Real-time</span>
</a>
</li>
<li class="flix-header-burger-menu__item">
<a class="flix-header-burger-menu__link" href="/">
<span class="flix-header-burger-menu__text">About Us</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="flix-header-burger-menu__overlay flix-overlay"></div>
</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-switcher-popup" data-firstfocusable="close-language-switcher" 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/eu.svg" alt="European Union"/>
English
<span class="flix-sr-only">Open language selection</span>
</button>
</div>
</div>
</div>
</header>
<div id="language-switcher-popup" class="flix-language-switcher-popup" aria-label="Language selection" hidden="">
<div class="flix-language-switcher-popup__body">
<button id="close-language-switcher" type="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>
</li>
<li class="flix-language-switcher-popup__item">
<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 & 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>