Navigation
Your notes, in one place.
iOS navigation bar
Compact or large-title navigation with circular actions and an optional vertical rail.
Preview
In action
When to use
Use it for
- A compact app title, a large root-screen title, or a trailing vertical action rail.
- Pass native button properties to actions, including disabled, form and type.
Not for
- Primary destination switching; use the iOS tab bar.
- More actions than fit comfortably in the available width.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { IOSNavigationBar } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/ios-navigation-bar.
2. Vendor the source
npx @noorddev/vlak-cli add ios-navigation-bar
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/ios-navigation-bar.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { IOSNavigationBar } from "@noorddev/vlak-react";
<IOSNavigationBar title="Notes" onBack={() => history.back()} actions={[{ id: "done", label: "Done", type: "submit", form: "note-editor" }]} />Props
IOSNavigationBar
Compact and large-title navigation, with an optional trailing Duo action rail.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | ||
onBack | () => void | ||
backLabel | string | "Back" | |
actions | IOSNavigationBarAction[] | [] | |
orientation | "horizontal" | "vertical" | "horizontal" | |
largeTitle | boolean | false |
Also accepts Omit<HTMLAttributes<HTMLElement>, "title" | "children">.
Keyboard
| Keys | Does |
|---|---|
| Tab, Shift+Tab | Moves through enabled Back and action buttons. |
| Enter, Space | Activates a focused action with native button behavior. |
Accessibility
- Back and icon actions have accessible labels. Each target is at least 44px.
- Instance-scoped action IDs avoid collisions; buttonId permits explicit references.
Markup
<header class="rs-ios-navigation-bar"><div class="rs-ios-navigation-bar-row"><button class="rs-ios-navigation-bar-button rs-ios-navigation-bar-back" type="button" aria-label="Back">←</button><h2 class="rs-ios-navigation-bar-title">Notes</h2><div class="rs-ios-navigation-bar-actions"><button class="rs-ios-navigation-bar-button" type="button">Done</button></div></div></header>
Classes
.rs-ios-navigation-bar.rs-ios-navigation-bar-vertical.rs-ios-navigation-bar-row.rs-ios-navigation-bar-leading.rs-ios-navigation-bar-rail.rs-ios-navigation-bar-actions.rs-ios-navigation-bar-actions-vertical.rs-ios-navigation-bar-title.rs-ios-navigation-bar-large-title.rs-ios-navigation-bar-vertical-title.rs-ios-navigation-bar-button.rs-ios-navigation-bar-back.rs-ios-navigation-bar-icon-button.rs-ios-navigation-bar-disabled