Navigation/DSTabs

DSTabs

navigation
since 0.1.0

Tab bar with icon, label, and badge support. Uses spring animations for the active indicator.

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

Purpose

Top-level navigation between 2–5 primary sections of an app.

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
itemsreq[DSTabItem]—Tabs with id, label, icon and optional badge count.
selectionreqBinding<String>—id of the active tab.
contentreq@ViewBuilder (DSTabItem) -> Content—Builds the screen for the active tab.

Examples

Primary app navigation

Four tabs with a badge.

swift
DSTabs(
    items: [
        DSTabItem(id: "home",     label: "Home",     icon: "house.fill"),
        DSTabItem(id: "search",   label: "Search",   icon: "magnifyingglass"),
        DSTabItem(id: "inbox",    label: "Inbox",    icon: "tray.fill", badge: 3),
        DSTabItem(id: "profile",  label: "Profile",  icon: "person.fill"),
    ],
    selection: $selectedTab
) { tab in
    switch tab.id {
    case "home": HomeView()
    case "search": SearchView()
    case "inbox": InboxView()
    default: ProfileView()
    }
}

Related Components

SegmentedControlNavigationBar