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
Navigation and app shells (Desktop)
Desktop packNavigation and structure
Desktop navigation and app shells: sidebars, icon rails, top nav, breadcrumbs, menus and full page layouts.
- components
- 14
- variants
- 32
- recreations
- 6
- themes
- 5
Also for mobile: Navigation and app shells
What’s inside
14 navigation patterns for desktop apps: sidebars, collapsible sidebars, icon rails, workspace switchers, top nav, mega menus, user menus, breadcrumbs, pagination, skip links and tables of contents, plus app, three-pane and settings shells built from those parts. Each page has notes on use, anatomy, states, keyboard and screen readers, and a live grid in light and dark, comfortable and compact.
- App, three-pane and settings shells built from the nav parts
- Keyboard and screen reader notes on every page
- 6 recreations of navigation in well-known work tools
Sidebar
Free sample4 variants
- Sections
- Nested
- Default
- Loading
Collapsible sidebar
2 variants
- Expanded
- Collapsed
Icon rail
2 variants
- Below
- None
Workspace switcher
2 variants
- Closed
- Open
Top nav
2 variants
- Closed
- Open
Breadcrumbs
3 variants
- Path
- Collapsed
- With switcher
Pagination bar
3 variants
- Numbered
- Compact
- Load more
App shell
2 variants
- Sidebar and header
- Header only
Three-pane layout
2 variants
- Selected
- None
Settings shell
2 variants
- Desktop
- Tablet
User menu
2 variants
- Closed
- Open
Mega menu
2 variants
- Columns
- With feature
Skip link
2 variants
- Hidden
- Focused
Table of contents
2 variants
- Sidebar
- Inline
- Figma file
- SuperDuper Pack: Navigation and app shells (Desktop)
- 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 Linear, Notion and Slack and others 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.
Issue tracker
Recreated from Linear
Docs workspace
Recreated from Notion
Team chat
Recreated from Slack
Code host
Recreated from GitHub
Payments dashboard
Recreated from Stripe Dashboard
Commerce admin
Recreated from Shopify admin
Not affiliated with, endorsed or sponsored by Linear, Notion, Slack, GitHub, Stripe Dashboard and Shopify admin. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the sidebar full size, free
An app sidebar with sections or nested items, in its default and loading states. All 4 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More navigation and structure packs
Top bars, headers and detail tops
Desktop9 components24 variants3 recreations
Desktop page headers, global top bars, sticky and detail headers, contextual save bars and object headers.
$9, or included with Pro
Questions about the navigation and app shells pack
One Figma file: SuperDuper Pack: Navigation and app shells (Desktop). It has 14 components with 32 variants, 6 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.