Navigation/DSSidebar

DSSidebar

navigation
since v1.0

Collapsible navigation sidebar for macOS and iPad with section grouping and active-state indicator.

macOS 14+iOS 17+ (iPad)

Purpose

Primary navigation for content-rich macOS apps and iPad split-view layouts.

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
sectionsreq[DSSidebarSection]—Nav sections with title and items.
selectedreqBinding<String?>—ID of the active item.
isCollapsedreqBinding<Bool>—Collapsed / expanded state.

Examples

macOS app nav

Two-section sidebar with active state.

swift
DSSidebar(
    sections: [
        DSSidebarSection(title: "Workspace", items: [
            DSSidebarItem(id: "dashboard", label: "Dashboard", icon: "house"),
            DSSidebarItem(id: "projects",  label: "Projects",  icon: "folder"),
        ]),
        DSSidebarSection(title: "Account", items: [
            DSSidebarItem(id: "settings", label: "Settings", icon: "gearshape"),
        ]),
    ],
    selected: $selectedItem,
    isCollapsed: $isSidebarCollapsed
)

Related Components

NavigationBarTabs