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 (Mobile)
Mobile packNavigation and structure
Mobile top bars and headers: nav bars, large titles, search, over-media, collapsing heroes, profiles, progress and selection.
- components
- 12
- variants
- 47
- recreations
- 3
- themes
- 5
Also for desktop: Top bars, headers and detail tops
What’s inside
12 header patterns for phone apps, including nav bars, edit bars, large titles with search, headers over media, collapsing heroes, cover and profile headers, segmented headers, step progress and multi-select bars. Top and scrolled phases are linked with Smart Animate. Each page has a documentation frame, a live grid in light and dark, comfortable and compact, and an in-context screen.
- Top, scrolled and collapsed phases linked with Smart Animate
- 3 recreations of music and stays app headers
Nav bar
Free sample8 variants
- Back
- Close
- Menu
- None
- Top
- Scrolled
Edit bar
6 variants
- Default
- Saving
- Error
- Top
- Scrolled
Large title
4 variants
- None
- Back
- Search off
- Search on
Large title collapsed
2 variants
- Collapsing
- Collapsed
Search header
3 variants
- Rest
- Active
- Filled
Header over media
2 variants
- Over media
- Scrolled
Collapsing hero
3 variants
- Expanded
- Collapsing
- Collapsed
Cover header
2 variants
- Expanded
- Collapsed
Profile header
4 variants
- Own
- Other
- Default
- Loading
Header with segmented control
2 variants
- Top
- Scrolled
Progress header
8 variants
- Back
- Close
- 1 of 4
- 2 of 4
- 3 of 4
- 4 of 4
Selection bar
3 variants
- None
- Some
- All
- Figma file
- SuperDuper Pack: Headers and nav bars (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 3 UI elements and 1 screen pattern
- Navigation bar, Large title, Hero header and Detail page
How Spotify, Airbnb and Apple Music 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.
Music playlist header
Recreated from Spotify
Stay listing header
Recreated from Airbnb
Album header
Recreated from Apple Music
Not affiliated with, endorsed or sponsored by Spotify, Airbnb and Apple Music. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the nav bar full size, free
A standard nav bar with Back, Close, Menu or no leading action, at the top and scrolled. All 8 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More navigation and structure packs
Navigation and app shells
Mobile9 components34 variants3 recreations
Mobile navigation: tab bars, centre actions, floating and minimised bars, side drawers, account switchers and iPad split view.
$9, or included with Pro
Questions about the top bars, headers and detail tops pack
One Figma file: SuperDuper Pack: Headers and nav bars (Mobile). It has 12 components with 47 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.