Mobile top navigation UI examples

Top navigation UI examples

• See the flow
  Scroll The Bible↗

  At the top, there is a 'Back' button and a title 'Explain Easier' with the verse reference 'Genesis 1:1'.

• See the flow
  SubPilot: Cancel Subscriptions↗

  The top of the screen features a back arrow for navigation.

• See the flow
  Vivino: Drink The Right Wine↗

  The top navigation bar includes a back button, the title 'Ratings', and a search icon.

• See the flow
  Plane Finder ⁃ Flight Tracker↗

  The top navigation bar includes a back button labeled 'Settings' and a centered title 'Dark Mode'.

• See the flow
  Deezer: Music Player, Podcast↗

  At the top, there is a navigation bar with 'Cancel' on the left, 'Playlist' as the title, and 'Create' on the right.

• See the flow
  Wallcraft – Wallpapers, live↗

  The layout features a top navigation bar with a 'Close' button and a currency/token balance indicator.

• See the flow
  Particle: Personalized News↗

  This screen from the Particle news app displays a modal overlay titled 'Topics' over a background page focused on 'Baseball'.

• See the flow
  GoodNovel - Booktok, Stories↗

  The top section shows the book title, a back button, and icons for bookmarking and sharing.

• See the flow
  Tiny Scanner - PDF Scanner App↗

  At the bottom of the screen, a horizontal navigation bar provides sharing and export options: 'Email', 'Fax', 'Open in...', 'Photos', and a 'More' menu button.

• See the flow
  1.1.1.1: Faster Internet↗

  At the top, there is a navigation bar with a 'Settings' title and a 'Done' button.

• See the flow
  Map My Run GPS Running Tracker↗

  At the top, a user-uploaded photo shows a person smiling, overlaid with a data card summarizing their workout performance (36:18 duration, 3.12 miles, 9:51 pace, 11:38 avg pace, 430 calories).

• See the flow
  HBX | Globally Curated Fashion↗

  The layout consists of a top navigation bar with a 'Done' button on the left and a '+' icon on the right.

• See the flow
  Refina: AI Plastic Surgery↗

  At the top, a navigation bar indicates the current step as '01 OF 21 : PHOTO INTAKE' with back and forward arrows.

• See the flow
  Ascend: Bible Game↗

  At the top, there is a navigation bar with a back button, group avatar, group name, a progress indicator (0/145 today), and a notification bell.

• See the flow
  The Guardian - US & World News↗

  At the top, a navigation bar includes a back button, a 'Listen' button, a bookmark icon, a share icon, and a text-size adjustment icon.

• See the flow
  Yik Yak↗

  The layout is minimal, featuring a back arrow in the top-left corner, a large bold '90' in the center, and the text 'days until you can change your school' below it.

• See the flow
  VSCO: Photo & Video Editor↗

  The top navigation bar contains a close 'X' button on the left and a 'Next' text button on the right.

• See the flow
  Everlook- Face & Body Editor↗

  The bottom section contains a two-row navigation menu for various editing tools.

• See the flow
  DAZN: Stream Live Sports↗

  At the top, a navigation bar includes a back button, the title 'Sports', a search icon, a cast icon, and a user profile avatar.

• See the flow
  Meetup: Social Events & Groups↗

  At the top, there is a navigation bar with a close button on the left and a tabbed menu containing 'About', 'Careers', and 'Media'.