Navigation/DSFloatingTabBar

DSFloatingTabBar

navigation
since v1.2

Floating tab bar with capsule, rounded, or standard styles. Features smooth spring animations and matched geometry transitions.

iOS 17+macOS 14+

Purpose

Modern alternative to standard tab bars, ideal for content-focused apps that need elegant navigation without blocking screen content.

Props

PropTypeDefaultDescription
itemsreq[DSFloatingTabItem]—Tab items with id, label, icon, and optional badge.
selectionreqBinding<String>—ID of the currently selected tab.
styleDSFloatingTabBarStyle.capsuleVisual style: .capsule (pill-shaped), .rounded (rounded rectangle), or .standard (minimal).

Examples

Capsule style navigation

Modern floating navigation with pill-shaped background.

swift
DSFloatingTabBar(
    items: [
        DSFloatingTabItem(id: "home", label: "Home", icon: "house.fill"),
        DSFloatingTabItem(id: "explore", label: "Explore", icon: "safari"),
        DSFloatingTabItem(id: "library", label: "Library", icon: "books.vertical.fill"),
        DSFloatingTabItem(id: "profile", label: "Profile", icon: "person.circle.fill"),
    ],
    selection: $selectedTab,
    style: .capsule
)
.padding(.horizontal, DSSpacing.md)
.padding(.bottom, DSSpacing.md)

With notification badges

Tab items can display notification counts.

swift
DSFloatingTabBar(
    items: [
        DSFloatingTabItem(id: "inbox", label: "Inbox", icon: "tray.fill", badge: 12),
        DSFloatingTabItem(id: "notifications", label: "Alerts", icon: "bell.fill", badge: 3),
        DSFloatingTabItem(id: "messages", label: "Messages", icon: "message.fill"),
    ],
    selection: $selectedTab
)

When to Use

✓ Use DSFloatingTabBar for:

  • • Content-focused apps where standard tab bars feel too heavy
  • • Modern, minimal navigation that doesn't block content
  • • Apps with 3-5 primary sections
  • • When you want smooth, delightful tab transitions

✗ Avoid using for:

  • • Apps requiring traditional iOS navigation patterns
  • • More than 5 tabs (becomes cramped)
  • • When accessibility requires standard tab bar semantics

Consider instead:

DSTabBar

For traditional iOS tab bar patterns

DSTabs

For top-level navigation with underline style

Accessibility

VoiceOver

Announces tab label, selection state, and badge count (e.g., 'Home, selected, 3 notifications'). Unselected tabs announce 'not selected'.

Keyboard

  • • Left/Right arrow keys to navigate between tabs
  • • Space or Return to select
  • • Automatic focus management

Dynamic Type

✓ Supported

Contrast

Colors follow design best practices with adaptive light/dark mode support

Traits

.isButton for each tab.isSelected for active tabBadge count announced naturally

Related Components

TabsTabBarSegmentedControl