Navigation/DSTabBar

DSTabBar

navigation
since 1.2.0

Horizontal scrollable tabs with animated underline indicator.

iOSmacOS

Purpose

Use for content segmentation with 3-8 tabs. Features smooth animated underline that follows selection.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Props

PropTypeDefaultDescription
tabsreq[String]—Array of tab labels
selectionreqBinding<String>—Binding to selected tab
accessibilityLabelString?nilOptional accessibility label

Examples

Content tabs

Tabs for switching between content sections.

swift
@State var selectedTab = "Overview"

VStack {
    DSTabBar(
        tabs: ["Overview", "Activity", "Settings"],
        selection: $selectedTab
    )
    
    // Content based on selection
    switch selectedTab {
    case "Overview": OverviewView()
    case "Activity": ActivityView()
    case "Settings": SettingsView()
    default: EmptyView()
    }
}

Profile sections

Multiple tabs for user profile.

swift
@State var activeTab = "Posts"

VStack(spacing: 0) {
    ProfileHeader(user: user)
    
    DSTabBar(
        tabs: ["Posts", "About", "Photos", "Videos", "Friends"],
        selection: $activeTab
    )
    
    ScrollView {
        TabContent(for: activeTab)
    }
}

Composition: Dashboard with tabs

Analytics dashboard with tab navigation.

swift
VStack(alignment: .leading, spacing: DSSpacing.md) {
    HStack {
        Text("Analytics")
            .font(.system(size: 24, weight: .bold))
        Spacer()
        DSButton("Export", variant: .ghost, icon: "arrow.down.doc") {
            exportData()
        }
    }
    
    DSTabBar(
        tabs: ["Overview", "Revenue", "Users", "Traffic", "Reports"],
        selection: $selectedTab
    )
    
    AnalyticsContent(tab: selectedTab)
}

Usage Guidelines

  • Use for 3-8 tabs; fewer tabs use DSSegmentedControl instead
  • Keep tab labels short (1-2 words)
  • Tabs scroll horizontally when they don't fit
  • Animated underline provides clear visual feedback

When to Use

✓ Use DSTabBar for:

  • • Content sections with 3-8 options
  • • Profile or detail screens with multiple views
  • • Dashboard navigation between analytics sections
  • • Horizontal scrolling when tabs don't fit on screen

✗ Avoid using for:

  • • 2-3 options only (use DSSegmentedControl)
  • • More than 8 tabs (consider dropdown or sidebar)
  • • Mutually exclusive filters (use DSSegmentedControl)
  • • App-level navigation (use native TabView)

Consider instead:

DSSegmentedControl

For 2-4 mutually exclusive options

DSSubnavigation

For lighter-weight secondary navigation

TabView

For app-level bottom tab navigation on iOS

Accessibility

VoiceOver

Announces 'Tab Bar, [selected tab], Tab, [position] of [total]'

Keyboard

  • • Arrow keys to navigate tabs
  • • Space or Return to select
  • • Tab to focus control

Dynamic Type

✓ Supported

Contrast

WCAG AA compliant (underline 3:1, text 4.5:1)

Traits

.isButton for each tab.isSelected for active tabScrollable when needed

Related Components

SegmentedControlTabsSubnavigation