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.

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