AppBar

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

Preview

Page Title

Page Content

Usage

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

<AppBar
  title="Home"
  leading={<MenuOutline />}
/>

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

Child Page

Sizes

<AppBar title="Main Screen" size="large" />
<AppBar title="Child Page" size="medium" />

Back Button

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

Settings

Back Button

<AppBar 
  title="Settings" 
  size="medium" 
  showBackButton 
  onBackClick={() => {}} 
/>

Search Field

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

Library

Search Field

<AppBar 
  title="Library" 
  showSearch 
  searchPlaceholder="Search files..." 
/>

Search Only

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

Search Only

<AppBar showSearch size="medium" />

Scroll & Sticky

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

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

<AppBar title="Dashboard" size="large" sticky showSearch />

With Actions

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

Profile

With Actions

<AppBar
  title="Profile"
  actions={[
    <IconButton variant="tertiary" icon={<SearchOutline />} />,
    <IconButton variant="tertiary" icon={<MoreHorizontalOutline />} />
  ]}
/>

With Avatar

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

Home

With Avatar

<AppBar
  title="Home"
  actions={[
    <IconButton variant="tertiary" icon={<BellOutline />} />,
    <Avatar name="Hoang Thuan" size="24" />
  ]}
/>

AppBar

Preview

Page Title

Component API

AppBar

Variants

Sizes

Main Screen

Back Button

Search Field

Library

Search Only

Scroll & Sticky

Dashboard

With Actions

Profile

With Avatar

Home

On this page