Components

NavigationBar

Display a title, optional back button and page actions.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code

'use client';
import { NavigationBar } from '@swiftuijs/ui';
export default function Example() {
    return ((<NavigationBar title="Home"/>));
}

StandardPage creates a bar when navigationTitle is provided and automatically wires back navigation for pushed pages.
A standalone bar requires explicit showBackButton and onBack; it does not infer navigation state.
For a custom back guard, render a standalone NavigationBar, validate in onBack, then call useNaviContext().dismiss(). Do not also enable the automatic StandardPage bar.
toolbarItems accepts React content; compose multiple actions with HStack. Keep actions short and label icon-only buttons for screen readers.
Appearance uses theme tokens such as --sw-accent-color, --sw-color-background-primary, and --sw-color-separator. A local glass override controls the bar material.

See StandardPage for an automatic bar and theming for scoped customization.

With Back Button

With Toolbar Items

In Navigation Stack

Prop	Type	Required	Description
`title`	`string`	No	Navigation bar title
`showBackButton`	`boolean`	No	Whether to show back button Default: `false`
`onBack`	`() => void`	No	Callback when back button is clicked
`toolbarItems`	`ReactNode`	No	Toolbar items to display on the right side
`glass`	`boolean \| { enabled?: boolean; intensity?: number; variant?: 'regular' \| 'clear' }`	No	Local material override. Intensity is clamped to 0–1; zero uses an opaque surface. Default: `Inherited from UIProvider; off without a provider`

Inherits additional props from GlassSurfaceProps.

MultiDatePicker

MultiDatePicker adapts SwiftUI's multi-date selection model to the web by combining a native date input with an ordered list of selected dates.

NavigationLink

Navigate to a React page inside `NavigationStack`, open a URL, or dismiss the current page.