Photonix

AppBar

Top app bar displays information and actions relating to the current screen.

Preview

Project workspace

Page Content

Usage
"use client";

import { AppBar, IconButton } from '@photonix/ultimate';
import { MoreHorizontalOutline, SearchOutline } from '@photonix/icons';

export default function AppBarBasicExample() {
    return (
        <AppBar
            title="Project workspace"
            size="medium"
            showBackButton
            actions={[
                <IconButton key="search" size="large" icon={<SearchOutline />} variant="tertiary" aria-label="Search" />,
                <IconButton key="more" size="large" icon={<MoreHorizontalOutline />} variant="tertiary" aria-label="More options" />,
            ]}
            elevated
        />
    );
}

Component API

AppBar

Prop
Type
Default
Description
title
React.ReactNode
-
Title content
size
AppBarSize
'large'
App bar size
showBackButton
boolean
false
Whether to show back button
onBackClick
(() => void)
-
Back button click handler
actions
React.ReactNode[]
[]
Action icons (max 3 recommended)
showSearch
boolean
false
Whether to show search field
searchPlaceholder
string
'Search'
Search placeholder text
searchValue
string
-
Search value
onSearchChange
((value: string) => void)
-
Search change handler
sticky
boolean
false
Whether app bar is sticky and collapses on scroll (self-managed)
elevated
boolean
-
Whether app bar is elevated (has shadow/divider). Can be controlled externally (e.g., by Sheet when content is scrolled).
scrollProgress
number
-
Scroll progress from 0 (expanded) to 1 (collapsed). When provided by parent (e.g., Sheet), controls the collapsing animation. Follows Material Design 3 pattern for LargeTopAppBar.
leading
React.ReactNode
-
Leading element (left side) - overrides back button
trailing
React.ReactNode
-
Trailing element (right side) - overrides actions
className
string
-
Additional class name

Variants

Sizes

Large is for main screens with headline-medium title. Medium is for child pages or scrolled states.

Main Screen

Main Screen

Child Page

Sizes
"use client";

import { AppBar } from '@photonix/ultimate';

export default function AppBarSizesExample() {
    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '100%' }}>
            <div style={{ border: '1px solid var(--border-neutral-tertiary)', borderRadius: '8px', overflow: 'hidden' }}>
                <AppBar title="Main Screen" size="large" />
            </div>
            <div style={{ border: '1px solid var(--border-neutral-tertiary)', borderRadius: '8px', overflow: 'hidden' }}>
                <AppBar title="Child Page" size="medium" />
            </div>
        </div>
    );
}

Back Button

Display a back navigation button. Use medium size for child pages.

Settings

Back Button
"use client";

import { AppBar } from '@photonix/ultimate';

export default function AppBarBackExample() {
    return (
        <div style={{ width: '100%', border: '1px solid var(--border-neutral-tertiary)', borderRadius: '8px', overflow: 'hidden' }}>
            <AppBar title="Settings" size="medium" showBackButton onBackClick={() => {}} />
        </div>
    );
}

Search Field

AppBar integrates a search field that expands into a focus mode when active.

Library

Library

Search Field
"use client";

import { AppBar } from '@photonix/ultimate';

export default function AppBarSearchExample() {
    return (
        <div style={{ width: '100%', border: '1px solid var(--border-neutral-tertiary)', borderRadius: '8px', overflow: 'hidden' }}>
            <AppBar title="Library" size="large" showSearch searchPlaceholder="Search files..." />
        </div>
    );
}

Search Only

App bar can function as a search bar only, without a title.

Search Only
"use client";

import { AppBar } from '@photonix/ultimate';

export default function AppBarSearchOnlyExample() {
    return (
        <div style={{ width: '100%', border: '1px solid var(--border-neutral-tertiary)', borderRadius: '8px', overflow: 'hidden' }}>
            <AppBar showSearch size="medium" />
        </div>
    );
}

Scroll & Sticky

Set sticky to true and size to large for an AppBar that auto-collapses and gains elevation on scroll.

Dashboard

Dashboard

Scroll this area!

Scroll content line 1 to see the transition.

Scroll content line 2 to see the transition.

Scroll content line 3 to see the transition.

Scroll content line 4 to see the transition.

Scroll content line 5 to see the transition.

Scroll content line 6 to see the transition.

Scroll content line 7 to see the transition.

Scroll content line 8 to see the transition.

Scroll content line 9 to see the transition.

Scroll content line 10 to see the transition.

Scroll content line 11 to see the transition.

Scroll content line 12 to see the transition.

Scroll content line 13 to see the transition.

Scroll content line 14 to see the transition.

Scroll content line 15 to see the transition.

Scroll & Sticky
"use client";

import { AppBar, IconButton, Text } from '@photonix/ultimate';
import { CircleOutline } from '@photonix/icons';

export default function AppBarScrollExample() {
    return (
        <div
            style={{
                width: '100%',
                height: '300px',
                border: '1px solid var(--border-neutral-tertiary)',
                borderRadius: '8px',
                overflow: 'auto',
                position: 'relative',
            }}
        >
            <AppBar
                title="Dashboard"
                size="large"
                sticky
                showSearch
                actions={[
                    <IconButton key="msg" icon={<CircleOutline />} variant="tertiary" size="large" aria-label="Messages" />,
                    <IconButton key="notif" icon={<CircleOutline />} variant="tertiary" size="large" aria-label="Notifications" />,
                ]}
            />
            <div style={{ padding: '16px' }}>
                <Text weight="bold">Scroll this area!</Text>
                {Array.from({ length: 15 }, (_, i) => (
                    <Text key={i} color="secondary" style={{ marginTop: '12px', display: 'block' }}>
                        Scroll content line {i + 1} to see the transition.
                    </Text>
                ))}
            </div>
        </div>
    );
}

With Actions

App bars can have multiple action buttons on the right. Recommended maximum is 3.

Profile

Profile

With Actions
"use client";

import { AppBar, IconButton } from '@photonix/ultimate';
import { MoreHorizontalOutline, SearchOutline } from '@photonix/icons';

export default function AppBarActionsExample() {
    return (
        <div style={{ width: '100%', border: '1px solid var(--border-neutral-tertiary)', borderRadius: '8px', overflow: 'hidden' }}>
            <AppBar
                title="Profile"
                actions={[
                    <IconButton key="1" size="large" icon={<SearchOutline />} variant="tertiary" aria-label="Search" />,
                    <IconButton key="2" size="large" icon={<MoreHorizontalOutline />} variant="tertiary" aria-label="More" />,
                ]}
            />
        </div>
    );
}

With Avatar

App bars can use an Avatar component as an action item, commonly used for user profile access.

Home

H

Home

With Avatar
"use client";

import { AppBar, Avatar, IconButton } from '@photonix/ultimate';
import { BellOutline } from '@photonix/icons';

export default function AppBarAvatarExample() {
    return (
        <div style={{ width: '100%', border: '1px solid var(--border-neutral-tertiary)', borderRadius: '8px', overflow: 'hidden' }}>
            <AppBar
                title="Home"
                actions={[
                    <IconButton key="notif" icon={<BellOutline />} variant="tertiary" size="large" aria-label="Notifications" />,
                    <Avatar key="avatar" name="Hoang Thuan" size="24" />,
                ]}
            />
        </div>
    );
}

On this page

Preview
Component API
Variants
Sizes
Back Button
Search Field
Search Only
Scroll & Sticky
With Actions
With Avatar
Photonix UI - React Components, Templates & Figma Design System