Navigation and app shells
Desktop14 components32 variants6 recreations
Desktop navigation and app shells: sidebars, icon rails, top nav, breadcrumbs, menus and full page layouts.
$9, or included with Pro
Top bars, headers and detail tops (Desktop)
Desktop packNavigation and structure
Desktop page headers, global top bars, sticky and detail headers, contextual save bars and object headers.
- components
- 9
- variants
- 24
- recreations
- 3
- themes
- 2
Also for mobile: Top bars, headers and detail tops
What’s inside
Nine desktop header patterns: page headers with breadcrumbs, description and actions, global top bars, sticky headers, detail headers with status, full-screen editor bars, contextual bars for selection and unsaved changes, object headers, filter headers and an in-app hero. Every page has documentation, a live grid in Light and Dark, Comfortable and Compact, and a full page scene.
- Contextual bar for selection, unsaved changes and saving
- Shown in full 1280 by 640 page scenes
- 3 recreations from GitHub, Linear and Stripe
Page header
Free sample4 variants
- Title only
- With breadcrumbs
- With description
- With actions
Global top bar
3 variants
- Product
- Search first
- Signed out
Sticky header
2 variants
- Expanded
- Compact
Detail header
3 variants
- Open
- In review
- Done
Full-screen bar
2 variants
- Editor
- Viewer
Contextual bar
3 variants
- Selection
- Unsaved changes
- Saving
Object header
3 variants
- Person
- Organisation
- Product
Filters header
2 variants
- Default
- Filters applied
In-app hero
2 variants
- With art
- Centred
- Figma file
- SuperDuper Pack: Top bars, headers and detail tops (Desktop)
- Themes
- Light and Dark
- 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 GitHub, Linear and Stripe Dashboard 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.
Repository header
Recreated from GitHub
Issue header
Recreated from Linear
Payment header
Recreated from Stripe Dashboard
Not affiliated with, endorsed or sponsored by GitHub, Linear and Stripe Dashboard. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the page header full size, free
A page header with title only, breadcrumbs, a description or actions. All 4 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More navigation and structure packs
Tabs and segmented controls
Desktop9 components49 variants3 recreations
Desktop tabs and segmented controls: line, contained, icon, count, document, overflow, vertical and view switchers.
$9, or included with Pro
Questions about the top bars, headers and detail tops pack
One Figma file: SuperDuper Pack: Top bars, headers and detail tops (Desktop). It has 9 components with 24 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.