Mobile bottom sheet UI examples

Bottom sheet UI examples

• See the flow
  Deezer: Music Player, Podcast↗

  A bottom sheet modal is overlaid on the screen, titled 'Banana Bops', providing management options for the selected group: 'Edit group name', 'Invite friends', and 'Leave the group'.

• See the flow
  DAZN: Stream Live Sports↗

  This screen displays a modal bottom sheet overlaying a sports league dashboard for the UEFA Champions League 2024/25.

• See the flow
  Hypelist: Create & Share Lists↗

  This screen displays a bottom sheet modal overlaying a list view of restaurant recommendations.

• See the flow
  Scroll The Bible↗

  This is a modal bottom sheet screen in the 'Scroll The Bible' app, titled 'Translation'.

• See the flow
  Bible Chat: Daily Devotional↗

  The book-selection sheet expands the selected book into a grid of chapter buttons.

• See the flow
  Equalizer - Volume Booster EQ↗

  This screen displays an audio spatialization or 3D sound effect control interface overlaid with a bottom sheet for music track management.

• See the flow
  Spoke Route Planner↗

  This screen is a modal bottom sheet in the Spoke Route Planner app, used for editing or adding details to a specific delivery stop.

• See the flow
  Hotels.com: Book hotels & more↗

  Further down, a 'Your saved item' section is visible, and a bottom sheet overlay is active, presenting a list of actions for a saved item: 'View and book', 'Change dates', 'Save to another trip', and 'Remove from trip'.

• See the flow
  Litres: Audio↗

  A book-action sheet offers saving, list management, completion, and recommendation controls.

• See the flow
  WebNovel - Read Novels & Manga↗

  A bottom sheet modal is overlaid on the screen, allowing the user to select a sorting method between 'Popular' and 'New arrivals', with 'Popular' currently selected.

• See the flow
  Fishbrain - Fishing App↗

  This screen is a bottom-sheet modal overlaying a satellite map view, designed for configuring map layers and styles in a fishing application.

• See the flow
  Yik Yak↗

  A 'Share via' bottom sheet modal is overlaid on the bottom half of the screen, offering sharing options like Messages, IG Story, Copy Link, Save, and More.

• See the flow
  CraftBook: Crochet Made Easy↗

  A bottom sheet overlay titled 'Choose your image' is currently active, providing two clear options for the user to select an image source: 'Camera' and 'Gallery', each accompanied by a corresponding icon.

• See the flow
  Plane Finder ⁃ Flight Tracker↗

  Top navigation bar followed by a filter configuration section and a bottom-sheet style list of filter options.

• See the flow
  Vivino: Drink The Right Wine↗

  A bottom sheet overlay is visible at the bottom of the screen, providing options to 'Set preference' and 'Remove from My Wines'.

• See the flow
  bergfex: Hiking & Tracking↗

  Top map background with a large bottom-sheet modal containing two grid-based sections for Maps and Overlays.

• See the flow
  Klook: Travel & Activities↗

  The foreground is a bottom-sheet modal titled 'Select passengers' which lists cabin classes: 'Economy' (currently selected with a checkmark), 'Economy / premium economy class', and 'Business / first class'.

• See the flow
  Gaia GPS: Mobile Trail Maps↗

  A bottom sheet titled 'Map Layers' is overlaid on the map, providing options to manage map overlays and save offline maps.

• See the flow
  VSCO: Photo & Video Editor↗

  This screen displays a user profile page in the VSCO app, overlaid with a bottom-sheet menu.

• See the flow
  Tiny Scanner - PDF Scanner App↗

  A bottom sheet titled 'Tools' is overlaid on the lower portion of the screen, offering three primary editing options: 'Recognize' (OCR), 'Marker' (annotation), and 'Watermark'.