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
Tabs and segmented controls (Desktop)
Desktop packNavigation and structure
Desktop tabs and segmented controls: line, contained, icon, count, document, overflow, vertical and view switchers.
- components
- 9
- variants
- 49
- recreations
- 3
- themes
- 2
Also for mobile: Tabs and segmented controls
What’s inside
Nine tab patterns for desktop apps, from line and contained tabs to closable document tabs with unsaved changes, an overflow menu, vertical tabs, a content switcher and a table, board or calendar view switcher. Documentation covers keyboard behaviour, including automatic and manual activation, Home and End, and Delete for closable tabs. Every page has a live grid in Light and Dark, Comfortable and Compact.
- Closable document tabs with unsaved state
- Overflow menu and view switcher for table, board and calendar
- 3 recreations from Notion, Linear and VS Code
Line tabs
Free sample6 variants
- Start
- Fill
- Resting
- Keyboard focus
- Disabled tab
Contained tabs
6 variants
- Hug
- Fill
- Resting
- Keyboard focus
- Disabled tab
Tabs with icons
6 variants
- Icon start
- Icon top
- Icon only
- Resting
- Keyboard focus
Tabs with counts
4 variants
- Count
- Count and icon
- Zero hidden
- Over 99
Document tabs
4 variants
- Resting
- Unsaved changes
- Keyboard focus
- Many tabs (scrolls)
Overflow tabs
4 variants
- Menu closed
- Menu open
- Visible tab
- Hidden tab
Vertical tabs
4 variants
- Labels
- Icons and counts
- Resting
- Keyboard focus
Content switcher
6 variants
- Text
- Icon and text
- 2 segments
- 3 segments
- 4 segments
View switcher
9 variants
- Segmented
- Tabs
- Menu
- Table
- Board
- Calendar
- Figma file
- SuperDuper Pack: Tabs and segmented controls (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
- Top tabs, Segmented control and Page indicator
How Notion, Linear and VS Code 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.
Database views
Recreated from Notion
Issue views
Recreated from Linear
Editor tabs
Recreated from VS Code
Not affiliated with, endorsed or sponsored by Notion, Linear and VS Code. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the line tabs full size, free
Line tabs aligned to start or filling the width, at rest, with keyboard focus and with a disabled tab. All 6 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 tabs and segmented controls pack
One Figma file: SuperDuper Pack: Tabs and segmented controls (Desktop). It has 9 components with 49 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.