Skip to content
Try free

Navigation and app shells (Mobile)

Mobile packNavigation and structure

Mobile navigation: tab bars, centre actions, floating and minimised bars, side drawers, account switchers and iPad split view.

components
9
variants
34
recreations
3
themes
5

Also for desktop: Navigation and app shells

What’s inside

9 navigation patterns for phone and tablet apps: tab bars with 3 to 5 tabs, badged tabs, centre action tabs, floating and minimised tab bars with a mini player slot, side drawers, a More grid, an account switcher and iPad split view. Each page has a documentation frame and a live grid in light and dark, comfortable and compact, with the bars shown in a 390 x 844 screen.

  • Tab bars with 3, 4 or 5 tabs, badges and a centre action
  • iPad split view in two and three columns
  • 3 recreations of photo, music and mail app navigation
  • Tab bar, every variant

    Tab bar

    Free sample

    6 variants

    • Default
    • Focus
  • Tab bar with badge, every variant

    Tab bar with badge

    3 variants

    • Count
    • Overflow
    • New
  • Centre action tab, every variant

    Centre action tab

    6 variants

    • Inline
    • Raised
    • Default
    • Pressed
    • Focus
  • Floating tab bar, every variant

    Floating tab bar

    4 variants

    • None
    • Detached
  • Minimised tab bar, every variant

    Minimised tab bar

    4 variants

    • Full
    • Minimised
    • None
    • Mini player
  • Side drawer, every variant

    Side drawer

    2 variants

    • Destinations
    • Folders and labels
  • More grid, every variant

    More grid

    2 variants

    • Grid
    • List
  • iPad split view, every variant

    iPad split view

    3 variants

    • Two columns
    • Three columns
    • Sidebar hidden
  • Account switcher, every variant

    Account switcher

    4 variants

    • Default
    • Switching
Figma file
SuperDuper Pack: Navigation and app shells (Mobile)
Themes
Light, Dark, Light high contrast, Dark high contrast and Wireframe
Densities
Comfortable and Compact
Also in the file
Usage and accessibility notes, motion specs, Figma variables
Covers 2 UI elements
Tab bar and Side drawer

How Instagram, Spotify and Gmail do it

Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.

  • Photo sharing tabs, every variant

    Photo sharing tabs

    Recreated from Instagram

  • Music streaming tabs, every variant

    Music streaming tabs

    Recreated from Spotify

  • Mail drawer, every variant

    Mail drawer

    Recreated from Gmail

Not affiliated with, endorsed or sponsored by Instagram, Spotify and Gmail. Their names are trade marks of their owners and are used only to say what each recreation is based on.

Tab bar, every variant

See the tab bar full size, free

A bottom tab bar with 3, 4 or 5 tabs, in default and focus states. All 6 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.

More navigation and structure packs

See all navigation and structure

  • Tabs and segmented controls

    Mobile17 components166 variants10 recreations

    Mobile top tabs, pill tabs, segmented controls, page dots and swipe pagers, with badges, scroll states and switch motion.

    $9, or included with Pro

  • Top bars, headers and detail tops

    Mobile12 components47 variants3 recreations

    Mobile top bars and headers: nav bars, large titles, search, over-media, collapsing heroes, profiles, progress and selection.

    $9, or included with Pro

Questions about the navigation and app shells pack

  • One Figma file: SuperDuper Pack: Navigation and app shells (Mobile). It has 9 components with 34 variants, 3 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.