Top Tabs: SwiftUI Top Tabs Pattern (Pro)

A scrolling strip of top tabs over swipeable pages, its indicator tracking the swipe and the strip keeping the selected tab in view.

Pro pattern · recorded from Pro

$npx swiftpieces add TopTabs

Needs a SwiftPieces Pro license: npx swiftpieces login first.

Open in the Pro library View pricing Live preview in every Pro style, and its source with SwiftPieces Pro.

ProPattern · Tab BarsiOS 17+Themed by Pro's design system

Type: TopTabs
Inside: Stretching indicator, Swipe between pages, Tab counts, Fill or scroll
Install, with a Pro license: npx swiftpieces add TopTabs
Depends on: Pro's Design System, which installs with it

A strip of tabs over a pager of your pages. The accent indicator follows the pager continuously, stretching to each tab's width, tapping a tab pages to it, and the strip scrolls to keep the selected tab in the middle. Tabs can show counts, and three or fewer share the width while more scroll.

Its SwiftUI source comes with SwiftPieces Pro: Top Tabs in the Pro library.

All patterns →

Tab Bars · ProNewPro

Action Tab Bar

A floating tab bar with a round create button set apart that opens quick actions over a scrim, with badges and tap again to scroll up.

Inside

Central create buttonQuick-create menuCreate button statesBadges and scroll to top

Tab Bars · ProNewPro

Accessory Tab Bar

A tab bar with a live accessory above it for what is playing or running, folding inline into the bar as the content scrolls.

Inside

Live accessory rowFolds on scrolliOS 26 and iOS 17Play and pause

Tab Bars · ProNewPro

Search Tab Bar

A floating tab bar with search set apart: tap it and the tabs fold away as it opens into a field over your recent searches.

Inside

Floating tab capsuleSearch that opens in placeRecent searchesYour results view

Top TabsNew

More patterns