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.

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[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