Navigation/DSSidebar

DSSidebar

navigation

since 0.1.0

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

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

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

Prop	Type	Default	Description
sectionsreq	[(title: String?, items: [DSSidebarItem])]	—	Sections with an optional title and their items. Items can nest children.
selectionreq	Binding<String>	—	id of the active item.
footer	AnyView?	nil	Optional view pinned to the bottom.

Examples

macOS app nav

Two sections with a badge and a footer.

swift

DSSidebar(
    sections: [
        (title: "Workspace", items: [
            DSSidebarItem(id: "dashboard", label: "Dashboard", icon: "house"),
            DSSidebarItem(id: "projects",  label: "Projects",  icon: "folder", badge: "12"),
        ]),
        (title: "Account", items: [
            DSSidebarItem(id: "settings", label: "Settings", icon: "gearshape"),
        ]),
    ],
    selection: $selectedItem,
    footer: AnyView(DSAvatar(initials: "JD", size: .sm))
)

Related Components

NavigationBar Tabs