Fluxo UIFluxo UIv0.4.93

Nav Bar

Mobile app bar — back button, title, action icons, and an optional extra row for filters, search, or segmented controls.

Basic Usage

Standard mobile nav bar

Back button on the left, title in the middle, action icons on the right.

Page body content goes here.
Back-button taps: 0
import { NavBar, Button } from 'fluxo-ui';

<NavBar
    title="Inbox"
    subtitle="3 unread"
    onBack={goBack}
    actions={(
        <>
            <Button leftIcon={SearchIcon} ariaLabel="Search" layout="plain" />
            <Button leftIcon={SettingsIcon} ariaLabel="Settings" layout="plain" />
        </>
    )}
/>

Variants

Standard

Title sits next to the leading area — default layout.

Body content

Centered

Title is absolutely centered between leading and actions — iOS-style.

Body content

Large title

iOS-style large title rendered on its own row below the toolbar.

Body content

Compact

Slim toolbar — pairs well with embedded screens or dense layouts.

Body content

Transparent

Use over hero imagery — drop background and border.

Hero image…
<NavBar variant="standard" title="Standard" actions={...} onBack={...} />
<NavBar variant="centered" title="Centered" actions={...} onBack={...} />
<NavBar variant="large" title="Large title" actions={...} />
<NavBar variant="compact" title="Compact" actions={...} onBack={...} />

Sub-row content

With segmented sub-row

Pass children to render an extra row below the toolbar — handy for segmented filters or tabs.

Showing: all

With search sub-row

Place a TextInput in children for an inline search experience.

Query: —
<NavBar
    title="Library"
    onBack={goBack}
>
    <SelectButton variant="segmented" items={...} value={view} onChange={...} />
</NavBar>

Import

import { NavBar } from 'fluxo-ui';
import type { NavBarProps, NavBarVariant, NavBarPosition } from 'fluxo-ui';

Props

title
ReactNode

Main title rendered in the bar (or as a large title when variant='large').

subtitle
ReactNode

Optional secondary line below the title.

leading
ReactNode

Element placed at the start of the bar after the back button (e.g., logo, avatar, menu icon).

actions
ReactNode

Right-aligned action group (icons, buttons, menus).

onBack
() => void

Click handler for the back button. When provided, the back button is shown automatically.

backLabel
string"'Back'"

Accessible/text label for the back button. Hidden visually on screens below the small breakpoint.

showBack
boolean

Force showing/hiding the back button. Defaults to true when onBack is set.

variant
'standard' | 'centered' | 'large' | 'transparent' | 'compact'"'standard'"

Visual layout. 'centered' centers the title between leading/actions (iOS-style). 'large' renders an iOS-style large title that collapses on scroll. 'transparent' removes background and border. 'compact' is a slim toolbar.

position
'top' | 'sticky' | 'fixed' | 'static'"'static'"

Page positioning of the bar.

bordered
boolean"true"

Show a thin border under the bar.

elevated
boolean"false"

Replace the bottom border with a soft drop shadow.

safeArea
boolean"false"

Apply env(safe-area-inset-*) padding so the bar respects iOS notches and home indicator.

collapseOnScroll
boolean"false"

When variant='large', shrink the large title into the inline row as the page scrolls.

scrollContainer
HTMLElement | null

Scrollable element to observe for collapseOnScroll. Defaults to window.

children
ReactNode

Optional extra row rendered below the toolbar (e.g., a search input, segmented control, tabs).

className
string

Additional CSS class for the bar root.

ariaLabel
string

Accessible name applied to the landmark <header>.

Features

Five variants

standard, centered, large (iOS-style), compact, and transparent.

Back button + actions

Built-in back button + an actions slot for icon buttons or menus.

Large-title collapse

When variant="large" + collapseOnScroll, the title shrinks to the inline row as the page scrolls.

Optional extra row

Pass children to add a second row for search inputs, filters, or segmented controls.

Safe-area-aware

safeArea prop applies env(safe-area-inset-top/left/right) so the bar respects iOS notches.

Position modes

static, sticky, fixed — pick the right scroll behavior for the screen.