Skip to main contentSkip to site searchSkip to component search
Honeycomb

Header

The header provides branding (through color and logo), navigation, and a widget. It is always located at the very top of a page.

A FlixBus branded header element which acts as a container for branding, main navigation and other things such as language switcher or profile widget.

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.

<header class="flix-header flix-header--unfixed">
    ...
</header>

You can also stretch the header contents to occupy the whole screen by adding a flix-header--fullwidth modifier.

Header contains 4 main elements:

flix-header-brand
Holds your logo goodness.
flix-header-skip-links
Container for the skip links to skip to main content and other areas of interest. Check the Skip Link component for more details.
flix-header-navbar
Which contains the main navigation.
flix-header-widgets
area to display additional content on the right side of the header.
Flix visual
Skip to booking details Skip to language selection
Picture of John Doe 
<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    
    <button aria-label="Open main site navigation" class="flix-header-nav-toggle" title="Toggle menu" data-toggle="flix-header-nav-wrapper" data-toggle-class="flix-header-nav-wrapper--visible"></button>
    
    <div class="flix-header-brand flix-header-brand--square">
      <a class="flix-header-brand__link" href="/">
        <img class="flix-header-brand__img" src="/img/logos/svg/honeycomb.svg" alt="Flix visual"/>
      </a>
    </div>
    
    <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-navbar">
      <div class="flix-header-nav-wrapper">
        
        <button aria-label="Close main site navigation" class="flix-header-nav-close" title="Close menu" data-toggle="flix-header-nav-wrapper" data-toggle-class="flix-header-nav-wrapper--visible"></button>
        <nav aria-label="Main site navigation">
          <ul class="flix-header-nav">
            
            <li class="flix-header-nav__item">
              <a class="flix-header-nav__link flix-header-nav__link--active" href="#">My Bookings</a>
            </li>
            <li class="flix-header-nav__item flix-header-nav__item--has-subnav">
              <div class="flix-header-subnav-trigger">
                <button class="flix-header-nav__link" aria-haspopup="menu">Plan Trip</button>
                
                <ul class="flix-header-subnav">
                  <li class="flix-header-subnav__item">
                    <a class="flix-header-subnav__link" href="#">Route Network</a>
                  </li>
                  <li class="flix-header-subnav__item">
                    <a class="flix-header-subnav__link" href="#">Coach destination</a>
                  </li>
                  <li class="flix-header-subnav__item">
                    <a class="flix-header-subnav__link" href="#">Night buses</a>
                  </li>
                </ul>
                
              </div>
            </li>
            <li class="flix-header-nav__item">
              <a class="flix-header-nav__link" href="#">About Us</a>
            </li>
          </ul>
        </nav>
        <div class="flix-header-widgets flix-header-widgets--mobile flix-header-widgets--has-container">
          <div class="flix-input flix-input--has-icon">
            <input type="text" aria-label="Search" class="flix-input--has-icon flix-input__field" placeholder="search me..."/>
            <i class="flix-input__icon flix-icon flix-icon-magnifier" aria-hidden="true"></i>
          </div>
        </div>
      </div>
      <div class="flix-header-navbar__overlay flix-overlay" data-toggle="flix-header-nav-wrapper" data-toggle-class="flix-header-nav-wrapper--visible"></div>
    </div>
    
    
    <div class="flix-header-widgets flix-header-widgets--sticky">
      <div class="flix-header-user-widget">
        <a class="flix-avatar flix-header-user-widget__avatar" href="#header">
          <img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
        </a>
        <div class="flix-header-user-widget__content">
          <nav aria-label="Profile navigation">
            <ul class="flix-header-nav">
              <li class="flix-header-nav__item flix-header-nav__item--has-subnav">
                <div class="flix-header-subnav-trigger">
                  <button class="flix-header-nav__link" aria-haspopup="menu">John Doe</button>
                  <ul class="flix-header-subnav">
                    <li class="flix-header-subnav__item">
                      <a class="flix-header-subnav__link" href="#">Profile</a>
                    </li>
                    <li class="flix-header-subnav__item">
                      <a class="flix-header-subnav__link" href="#">Log out</a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
    
  </div>
</header>

Brand container

Default brand container allows having rectangular text logos.

In order to use square logos, just add flix-header-brand--square modifier class to the brand container.

A container for skip links that will handle the absolute positioning of the links.

The skip links should be the first interactive elements of the page and they serve as a shortcut for keyboard users to go to the main areas of interest of the web page.

The nature of the skip links will depend on the nature of the page you're developing. For example:

  • The home page could have a link to skip to the language selector and another to the booking search;
  • A blog post could have a link to skip to the blog article and to the site wide search form;

Main menu has 3 main visual layouts:

  • mobile side navigation;
  • full width tablet menu;
  • 8 column desktop menu;

The menu changes these layouts on sm and xl breakpoints accordingly.

For mobile side navigation, when menu is hidden additional flix-header-nav-toggle element is being shown to toggle the sidenav appearance.

Dropdown navigation is purely powered with CSS magic. Sub navigation items are displayed when the list item that has a subnav (.flix-header-nav__item--has-subnav) is hovered by the mouse or focused by keyboard tab navigation. To achieve that you must add the --has-subnav modifier to the navigation item in question.

Replace the link element (.flix-header-nav__link) for a button that will toggle the submenu.

In order for dropdowns to work with native browser behavior on mobile and to avoid redundant link duplication we advice as a best practice avoiding using links for main navigation items that have sub-navigation attached.

The item serves a descriptive title purpose and all the relevant navigation items are put inside the dropdown itself.

This approach is illustrated in the example code, the button element Plan Trip is used with the sub-navigation.

<li class="flix-header-nav__item flix-header-nav__item--has-subnav">
  <button class="flix-header-nav__link" aria-haspopup="menu">Plan Trip</button>
  
  <ul class="flix-header-subnav">
      ...
  </ul>
  
</li>

For proper styles pay attention on preserving flix-main-nav__item--has-subnav modifier for nav items that have the dropdown navigation.

Mobile navigation

Main navigation is collapsed on sm and lower breakpoints, in this case flix-header-nav-wrapper gets hidden by default and expands itself as mobile side navigation with addition of flix-header-nav-wrapper--visible modifier. You need to toggle this class in order to control the visibility of the mobile navigation, easiest way is to use our simple classToggler plugin, but you can also do it on your own.

Widget container

Header has flix-header-widgets container area that can be used to display additional content on the right side of the header (search inputs, language switchers, phone numbers etc.) This container has certain width limitations so use it visely. By default this container is hidden on xs breakpoint (mobile), but you can force the widget to be visible on the top right on all screen sizes by adding the modifier flix-header-widgets--sticky.

In order to get your widgets displayed on mobile we provide an additional flix-header-widgets--mobile container within flix-header-nav-wrapper, you will need to either duplicate your widget content in there or provide it with a special mobile version of your content. This content will be displayed within the mobile side navigation. You can add optional flix-header-widgets--has-container modifier to provide a consistent spacings and a top border.

Header avatar widget

We include optional flix-header-user-widget element in Header component bundle. It can be used to display user profile in the widgets section and should not be used outside of it anywhere on page.

This is the user navigation, so the nav element should have the user name as aria-label.

HTML structure for this element is the following:

<div class="flix-header-user-widget">
  <a class="flix-avatar flix-header-user-widget__avatar" href="#header">
    <img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
  </a>
  <div class="flix-header-user-widget__content">
    <nav aria-label="John doe">
      <ul class="flix-header-nav">
        <li class="flix-header-nav__item flix-header-nav__item--has-subnav">
          <div class="flix-header-subnav-trigger">
            <button class="flix-header-nav__link" aria-haspopup="menu">John Doe</button>
            <ul class="flix-header-subnav">
              <li class="flix-header-subnav__item">
                <a class="flix-header-subnav__link" href="#">Profile</a>
              </li>
              <li class="flix-header-subnav__item">
                <a class="flix-header-subnav__link" href="#">Log out</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </nav>
  </div>
</div>

There are 2 main areas in there: avatar and content. avatar mostly inherits Avatar component, content part holds user name and can optionally have a dropdown menu, we rely on flix-header-nav element in order to display it in consistent way with the navigation.

If the only thing you require is displaying a name link the HTML can be simplified like so:

<div class="flix-header-avatar">
  <a class="flix-header-avatar__picture" href="/your-profile-link">
    <img class="flix-header-avatar__img" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
  </a>
  <div class="flix-header-avatar__content">
    <nav aria-label="Main site navigation">
      <ul class="flix-header-nav">
        <li class="flix-header-nav__item">
          <a class="flix-header-subnav__link" href="#">John Doe</a>
        </li>
      </ul>
    </nav>
  </div>
</div>
Made with 🍯 by FlixMobility 2022