Logo Header

The Logo Header is the key element for navigating the site, showing the user’s logged-in state and indicating which brand they are currently on.

Overview / Hero - KL

Anatomy

The default Header exists out of two sections:

  1. Logo Header
    1. Hamburger menu
    2. Logo
    3. Search button
    4. Language and region selector
    5. Login button
  2. Top Task: Primary navigation items

Logo Header is available on all pages, except for pages that follow a specific flow. For example the booking flow, where the Sub Header is used instead of the Top Task.

Overview / Anatomy - KL

Sub Header

The Sub Header replaces the top task bar and isolates the user in a flow/funnel. When the user enters a flow made of several steps we replace the Top Task with a sub-navigation bar that highlights the the type of flow the user had entered.

Overview / Anatomy 2 - KL

Mobile variants

Overview / Anatomy 3 - KL