UI elements

Top navigation bar

Screens containing top navigation bar.

  1. BookMyShow: Live events category directory (See All)

    A 'See All' directory scoped to HSR Layout, Bengaluru that groups the whole live-event catalogue into sections — Comedy Shows, Music Shows, Plays, Sports — each a horizontal rail of artwork tiles carrying a sub-genre name and an event count: STAND UP 210+ EVENTS, ROAST 7 EVENTS, IMPROV 6 EVENTS, CONCERTS 125+ EVENTS, MUSIC FESTIVALS 55+ EVENTS, CLUB GIGS 95+ EVENTS, STORY TELLING 9 EVENTS, THEATRE 65+ EVENTS, PUPPETRY 2 EVENTS. A back chevron and a search icon sit in the header.

    BookMyShow Live events category directory (See All)

    View the screen

  2. Cleartrip: Flight payment methods

    Pay and book boundary showing final fare and card, UPI, net banking, EMI, and wallet options.

    Cleartrip Flight payment methods

    View the screen

  3. Cleartrip: Review hotel itinerary

    Selected property, stay dates, room and guest count, room plan, cancellation policy, total, and Continue.

    Cleartrip Review hotel itinerary

    View the screen

  4. Cleartrip: Hotel traveller details

    Empty traveller identity and contact form with title, first name, last name, mobile number, email address, and Pay now.

    Cleartrip Hotel traveller details

    View the screen

  5. Cleartrip: Flight traveller and contact details

    Empty traveller and contact form with Add adult, email, mobile number, optional GST details, and Continue.

    Premium screenshot

    View the screen

  6. Cleartrip: Hotel destination picker

    Destination selection surface with hotel location suggestions and a clean list state.

    Premium screenshot

    View the screen

  7. District: Showtimes and cinema listing with date picker

    Film title in the header, a date strip, Filters and 'Sort by' controls, then cinema cards each listing a venue name with distance and a grid of clickable show times.

    Premium screenshot

    View the screen

  8. Domino’s: Guest home with order modes

    Guest home: preset Koramangala 4th Block location with a Detect Location banner, order-mode row (Delivery 20 MIN, Takeaway, Dine-in, Deliver on train), merchandised pizza cards with prices and Add controls, and Menu/Offers navigation. In dine-in mode the same surface re-binds its header to 'Dine-in at HSR LAYOUTS, ~100 meters' with a CHANGE control.

    Premium screenshot

    View the screen

  9. Domino’s: Pizza menu listing with filters

    Domino's Menu: veg/non-veg and sort filters, category tabs (Paneer Maxxx, Chicken Maxxx, Big Big Pizza, Meals), and product cards showing a pizza name, description, price and an inline Add control.

    Premium screenshot

    View the screen

  10. Domino’s: Cart and order review

    Cart: the added pizza with a quantity stepper, a free-delivery unlock banner, a Frequently Bought Together upsell rail, Apply Coupon, DELIVER NOW versus ADVANCE ORDER scheduling, and the ADD/SELECT ADDRESS call to action.

    Premium screenshot

    View the screen

  11. Domino’s: All Restaurants directory for dine-in

    City-first dine-in store directory: an 'All Restaurants' header, a city field resolved to BANGALORE, a Search Restaurant box, an 'All Restaurants' count line, and outlet cards each showing the restaurant name, full street address, opening hours and a SELECT button. Before a city is chosen the same screen shows an empty state, 'We could not find a restaurant near your location! Please select your city and try again.'

    Premium screenshot

    View the screen

  12. Domino’s: Dine-in checkout

    Dine-in presentation of the cart activity: 1 item in Cart with the ordered pizza and a quantity stepper, a Frequently Bought Together rail, a 'Dine-in at HSR LAYOUTS' store row with CHANGE where the address or pickup block would be, a Cash/UPI payment row and a live PLACE ORDER button showing You Pay Rs.576.

    Premium screenshot

    View the screen

  13. EaseMyTrip: Train results

    Loaded train options from New Delhi to Mumbai Central with departure and arrival times, duration, seat availability, and filters.

    Premium screenshot

    View the screen

  14. EaseMyTrip: Cab search

    Cab Search form with Airport Transfer, Outstation, and Hourly trip types; origin and destination fields, Date & Time, Add Return, Search, and offers.

    Premium screenshot

    View the screen

  15. EaseMyTrip: Select origin city

    Origin-airport selector with a city-or-airport search field, recent searches, and popular Indian cities with airport codes.

    Premium screenshot

    View the screen

  16. EaseMyTrip: Cab fare breakup

    Itemized cab fare showing adult base amount, tax, toll tax, state tax, promo discount, and grand total.

    Premium screenshot

    View the screen

  17. EaseMyTrip: Search hotels

    Hotel search form for choosing a destination, stay dates, guest count, and room count, with an offers section below.

    Premium screenshot

    View the screen

  18. EaseMyTrip: Train search

    Train ticket search for New Delhi to Mumbai Central with departure date and travel class choices, plus access to train-status utilities.

    Premium screenshot

    View the screen

  19. EaseMyTrip: Flight search

    Flight form for a Hyderabad-to-Bengaluru route with departure date, optional return, traveller and economy-cabin settings, fare options, and Search.

    Premium screenshot

    View the screen

  20. EaseMyTrip: Hotel search results

    Hotel results showing property cards with ratings, amenities, pricing, and controls for price, filters, and sorting.

    Premium screenshot

    View the screen

  21. EaseMyTrip: Bus search

    Bus Search hub with travel tabs, origin and destination fields, departure date shortcuts, Search, travel guidance, and Offers & Deals.

    Premium screenshot

    View the screen

  22. EaseMyTrip: Hotel property details

    Property detail view with photos, identity, rating, location, booking terms, stay dates, hotel information, price, and room-selection action.

    Premium screenshot

    View the screen

  23. EaseMyTrip: Outstation cab results

    Bengaluru-to-Mysuru cab options with vehicle type, capacity, luggage, distance, price, discounts, safety standards, and Filter and Sort.

    Premium screenshot

    View the screen

  24. EaseMyTrip: Choose a hotel room and rate

    Room and rate selection comparing available room types, meal plans, booking terms, amenities, and per-night prices.

    Premium screenshot

    View the screen

  25. EaseMyTrip: Select city and location

    City and location selector with a search field for entering a city, location, or specific place.

    Premium screenshot

    View the screen

  26. EaseMyTrip: Review hotel guest and contact details

    Loaded hotel review with stay and room details, empty contact and primary-guest fields, total price, and Continue Booking.

    Premium screenshot

    View the screen

  27. EaseMyTrip: Select source city

    Source-city selection screen with an empty search field for entering the trip origin.

    Premium screenshot

    View the screen

  28. EaseMyTrip: Cab transfer review and traveller details

    Transfer Review with trip and vehicle summary, traveller name fields, pickup and drop addresses, promo code, amount, and Continue Booking.

    Premium screenshot

    View the screen

  29. MakeMyTrip: MakeMyTrip home dashboard

    The app root: a header with the brand mark, search, myCash and myBiz; the Myra assistant bar; a twelve-tile line-of-business grid (Flights, Hotels, Holiday Packages, Trains/Bus, Airport Cabs, Villas & Homestays, Outstation Cabs, Forex Card & Currency, Tours & Attractions with a 'new' badge, Hourly Stays, Visa, Travel Insurance) with an expand chevron; an Offers feed with category chips and promo cards; and a bottom navigation bar.

    Premium screenshot

    View the screen

  30. MakeMyTrip: Cabs Review Your Ride

    The pre-payment cab review: trip address and schedule with Edit, the selected vehicle with rating, fuel type and seats, free-cancellation terms, a detailed Inclusions & Exclusions list of per-minute and per-kilometre overage rates and which tolls, parking and state taxes are included or excluded, a Policies link, a Coupon & Offers block, and the Part Pay / Full Pay / PAY NOW bar. The wording of the inclusions block and the two payment amounts differ by cab product: the hourly-rental and airport captures exclude tolls, parking and state tax, while the intercity Outstation capture states that tolls, state tax and driver allowance are included and quotes a per-kilometre rate beyond an included distance.

    Premium screenshot

    View the screen

  31. MakeMyTrip: Mobile-number login gate

    Authentication interception: a 'Login to Book Your Visa' header, a country-code selector defaulting to +91, an empty mobile-number field, a CONTINUE button and the privacy-policy / user-agreement consent line.

    Premium screenshot

    View the screen

  32. MakeMyTrip: Cab Search — trip entry

    The shared Cabs entry form: three product tabs (Outstation, Airport, Hourly Rentals) with Airport active, a Ride Guarantee promise strip, FROM and TO address fields with a swap control, a TRIP START date and time, a SEARCH button and an Offers band below the form.

    Premium screenshot

    View the screen

  33. MakeMyTrip: Destination activities listing

    Dated activity results for a destination: a header with the destination, the date range and Edit, filter controls (All Filters, Price, Categories), a 'SELECT YOUR EXPERIENCE' category rail (MMT Experience Pass, Attraction Tickets, Tours), an in-destination search field, and activity cards with duration, inclusions, a savings badge and a struck-through original price.

    Premium screenshot

    View the screen

  34. MakeMyTrip: Hotels Select Room

    Room and rate-plan chooser: date/guest header with Modify, Free Cancellation and Breakfast Included filters, a room card with size, view, bed and bathroom attributes, and competing rate plans with prices, a Selected marker and CONTINUE.

    Premium screenshot

    View the screen

  35. MakeMyTrip: Hotels UPI payment — select a UPI app or share a payment link

    UPI instrument surface: Total Due, a Select UPI App list of installed apps with a redirect warning and SHOW ALL, and a Share Payment Link alternative explaining that UPI ID/VPA entry is discontinued per NPCI guidelines, with a 10-minute link validity note.

    Premium screenshot

    View the screen

  36. MakeMyTrip: Hotels & Homestays search entry

    Stay-search form: By Night / Hourly Stays / Nearby Getaways tabs, a OneCircle Rewards promo, the city field, check-in and check-out dates, room/guest occupancy and a SEARCH button.

    Premium screenshot

    View the screen

  37. MakeMyTrip: Experience Pass Review Booking

    Pre-payment review of the pass booking: product name and tier, traveller count, TOTAL COST inclusive of taxes, an activation-window note, a Cancellation Policy block explaining the full refund before first activity booking and non-refundability after, an Add Traveller Details block with a passport-match warning, and the total with CONTINUE.

    Premium screenshot

    View the screen

  38. MakeMyTrip: Activity booking — Select Date

    A month calendar for choosing the visit date, with weekday headers, the current selection highlighted, FROM DATE and TO DATE summary fields and a DONE confirm button.

    Premium screenshot

    View the screen

  39. MakeMyTrip: Cabs priced options listing

    Partner-aggregated cab classes for the searched trip: a trip header with an Edit control, the Ride Guarantee strip, the distance/duration basis of the rates, and priced vehicle-class cards with seat counts, fuel type and an inline coupon and roof-carrier add-on.

    Premium screenshot

    View the screen

  40. MakeMyTrip: Hotels card payment — card entry

    Card-instrument form: Total Due header, an online-transaction warning with a Know more link, empty ENTER CARD NUMBER, MM/YY and CVV fields, and a PAY control that stays disabled while the form is empty.

    Premium screenshot

    View the screen

  41. MakeMyTrip: Hotels Review Booking

    Pre-payment stay summary: property name and locality, check-in and check-out with night count, guests and rooms, the selected room and meal plan, a non-refundable notice, an Inclusions & Cancellation Policy link, a recommended Addons block, and the total with CONTINUE.

    Premium screenshot

    View the screen

  42. MakeMyTrip: Select Preferences — traveller count

    Traveller-count chooser for the selected pass: the pass name and date in the header, Adult and Child rows with age bands, per-traveller prices and increment/decrement steppers, an age-band advisory note, and a running total with CONTINUE.

    Premium screenshot

    View the screen

  43. MakeMyTrip: Hotels payment landing — choose a payment method

    Payment-method landing with a session countdown: Total Due, a saved-payment login prompt, a Trip Secure+ add-on that reprices the total, a Gift Cards expander, and the payment options list (UPI Options, Credit & Debit Cards, EMI with a No Cost EMI badge).

    Premium screenshot

    View the screen

  44. MakeMyTrip: Hotel results listing

    Priced property results for the searched city and dates: a sticky search header with Maps / Sort / All Filters / OneCircle controls, a Rush Deals carousel, and rated property cards with nightly price and free-cancellation flags.

    Premium screenshot

    View the screen

  45. SNITCH: Product listing with filter and sort

    The listing surface used for category browsing and for text-search results: sub-filter chips (ALL, NEW, RELAXED, FORMAL, LINEN), grid-density toggles, a filter and sort control, and a product grid showing names, prices and wishlist hearts. Its filter and sort sheet offers SORT BY (POPULAR, PRICE HIGH TO LOW, PRICE LOW TO HIGH, NEW, CUSTOMER REVIEW) plus CATEGORY, SIZE, COLOR, PATTERN, FIT and MATERIAL facet groups with CLEAR and APPLY. When the surface is reached from a query it shows the query text in the header field with a result count, and the grid-density switch changes how much product copy each tile carries: the widest density shows a single full-bleed image per row with no name or price, while the 2-up density exposes product names and prices. Tapping a result tile opens that product's own detail page.

    Premium screenshot

    View the screen

  46. SNITCH: Shopping bag with price details

    BAG screen with one line item (Burgundy Solid Twill Shirt, M, quantity 1, Rs 1219), MOVE TO WISHLIST and delete controls, a locked coupons and gift cards row, a PRICE DETAILS breakdown of bag total, coupon discount and grand total, a YOU MAY ALSO LIKE carousel, and the SELECT ADDRESS TO CONTINUE call to action.

    Premium screenshot

    View the screen

  47. SNITCH: Curated collection lookbook

    The SNITCH X SIRAJ collection header sits above a sub-category chip row (ALL selected, then NEW, SHIRTS, T-SHIRTS, JEANS) and grid-density switchers. Below is a nine-tile editorial lookbook of full-bleed model photography. The tiles deliberately carry no product name, no price and no rating — the only shopping copy on the screen is the collection name and the chips. The bottom navigation bar (home, NEW, browse, bag, account) is visible.

    Premium screenshot

    View the screen

  48. Domino’s: Takeaway outlet picker near you

    Pickup store chooser: a 'Restaurant(s) Near Your Location' list under the current locality, each outlet card showing the restaurant name, full street address, opening hours, walking/driving distance, a View on Map link and a SELECT button, with some outlets badged NEW DRIVE-N-PICK.

    Premium screenshot

    View the screen

  49. Domino’s: Takeaway pickup checkout

    Pickup checkout on the cart activity: the ordered pizza with a quantity stepper, a Frequently Bought Together rail, a 'Takeaway | Restaurant' outlet block with CHANGE instead of a delivery address, a bill with no delivery fee, and a live PLACE ORDER button with Cash/UPI preselected.

    Premium screenshot

    View the screen

  50. Domino’s: Deliver on Train PNR entry

    Deliver on Train header over a PIZZA ON YOUR SEAT explainer ('We will deliver your favourite Pizza right on your train seat while you travel'), an 'Enter PNR to get started' card with an empty PNR field, the hint 'Valid PNR Number is Mandatory', an 'I agree to the IRCTC Ordering Terms & Conditions' checkbox and a green SUBMIT button, an IRCTC ORDER HISTORY row, and an IRCTC T&C block listing catered-station and 2-hour lead rules, 12:00-23:00 delivery hours and the 2-hour cancellation window, with READ MORE.

    Premium screenshot

    View the screen

More examples with Premium

Premium unlocks the remaining screenshots.