Navigation Components

Helping users throughout the booking process.

In this page
October 28th, 2025

Stepper

One Decision at a Time

The stepper helps users understand where they are, what's been completed, and what's ahead. By breaking the booking into distinct, manageable steps–Room, Flight, Guests, Transfers, Protection, and Checkout–users can focus on one decision at a time without feeling overwhelmed.

Design Features:

  • The back arrow enables quick sequential navigation to the previous step
  • The progress indicator (e.g., "5/6 Steps") provides motivation and sets expectations
  • The progress bar visually reinforces advancement through the flow, filling from left to right as users complete each step, providing an immediate sense of accomplishment and momentum.
  • Completed steps are indicated by blue text labels, while upcoming steps appear in light grey to show they haven't been reached yet.
See Annotations View Design Specs
October 28th, 2025

Step Header

The stepper maintains visibility while optimizing spacing.

Step 1 : Room

View Design Specs
October 28th, 2025

Desktop

The responsive design adapts seamlessly across devices: on desktop, all steps are visible in a horizontal layout.

View Design Specs
October 28th, 2025

Tablet

The stepper maintains visibility while optimizing spacing.

View Design Specs
October 28th, 2025

Mobile

The stepper scrolls horizontally to accommodate smaller screens while keeping the current step centered and prominent.

View Design Specs