Navigation/DSTabBar

DSTabBar

navigation
since 0.1.0

Horizontal scrollable tabs with animated underline indicator.

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

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
optionsreq[(label: String, value: T, count: Int?)]—Tabs. count shows a small counter next to the label; T is any Hashable value.
selectionreqBinding<T>—Selected tab value.

Examples

Content tabs

Underlined tabs with counters.

swift
@State private var selectedTab = "overview"

VStack {
    DSTabBar(
        options: [
            (label: "Overview", value: "overview", count: nil),
            (label: "Activity", value: "activity", count: 12),
            (label: "Settings", value: "settings", count: nil),
        ],
        selection: $selectedTab
    )

    switch selectedTab {
    case "overview": OverviewView()
    case "activity": ActivityView()
    default: SettingsView()
    }
}

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