Navigation/DSNavigationBar

DSNavigationBar

navigation

since 0.1.0

App navigation bar with a title, optional back button, and leading/trailing icon button slots.

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

Purpose

Top-level screen header in all non-tab navigation contexts.

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
titlereq	String	—	Screen title.
subtitle	String?	nil	Secondary line under the title.
leadingItems	[DSNavBarItem]	[]	Leading icon buttons (e.g. back).
trailingItems	[DSNavBarItem]	[]	Trailing icon buttons.
showDivider	Bool	true	Bottom hairline.

Examples

Screen header with actions

A back button is just a leading item.

swift

DSNavigationBar(
    title: "Project Details",
    subtitle: "Updated 2h ago",
    leadingItems: [
        DSNavBarItem(icon: "chevron.left", action: { dismiss() }),
    ],
    trailingItems: [
        DSNavBarItem(icon: "square.and.arrow.up", action: { share() }),
        DSNavBarItem(icon: "ellipsis", action: { showMenu = true }),
    ]
)

Related Components

Tabs Sidebar