DocsComponents

App bar

A home for the title, navigation, and actions of a screen.

My collection

Try the navigation icon.

Installation

Terminal

pnpm dlx shadcn@latest add https://react-toolbox.io/r/app-bar.json

New here? Set up your project first. Styles, fonts, and required components are included.

Usage

Use leftIcon and rightIcon with their click handlers for navigation and actions. Set fixed when the bar should stay at the top of the viewport.

Use the Code tab above for a complete example. The import follows your configured UI alias. See Theming to customize colors, spacing, and style slots.

State and callbacks

AppBar has no form value. Your application owns navigation and actions through onLeftIconClick and onRightIconClick.

scrollHide manages its own visibility from window scrolling. fixed controls positioning, not a controlled open state.

API reference

Generated from the installed TypeScript source. Defaults are the values declared by each function; a dash means no parameter default is declared. Forwarded props can use the receiving component’s default. Callback types show the exact arguments passed to your handler.

`AppBar`

Property	Type	Default
`fixed`	`boolean`	`false`
`flat`	`boolean`	`false`
`leftIcon`	`ReactNode`	`—`
`rightIcon`	`ReactNode`	`—`
`scrollHide`	`boolean`	`false`
`classNames`	`AppBarTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`AppBarTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`
`title`	`ReactNode`	`—`

Callbacks

Property	Type	Default
`onLeftIconClick`	`ComponentPropsWithRef<'button'>['onClick']`	`—`
`onRightIconClick`	`ComponentPropsWithRef<'button'>['onClick']`	`—`

Also inherits Omit<ComponentPropsWithRef<'header'>, 'title'>, except the omissions and overrides in its exported props type below. Use the supported native aria-*, data-*, event, and element attributes as appropriate.

Additional defaults on inherited props: className = ''.

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

appBar
fixed
flat
inner
leftIcon
rightIcon
scrollHide
title

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

Exported TypeScript types

Expand a type to inspect its full declaration, including generic constraints, union branches, callback arguments, ref handles, and inherited props. Import these types from @/components/ui/material/app-bar.

AppBarProps

tsx

interface AppBarProps extends Omit<ComponentPropsWithRef<'header'>, 'title'> {
  fixed?: boolean;
  flat?: boolean;
  leftIcon?: ReactNode;
  onLeftIconClick?: ComponentPropsWithRef<'button'>['onClick'];
  onRightIconClick?: ComponentPropsWithRef<'button'>['onClick'];
  rightIcon?: ReactNode;
  scrollHide?: boolean;
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: AppBarTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: AppBarTheme;
  title?: ReactNode;
}

AppBarTheme

tsx

type AppBarTheme = Partial<
  Record<'appBar' | 'fixed' | 'flat' | 'inner' | 'leftIcon' | 'rightIcon' | 'scrollHide' | 'title', string>
>;

AppBarClassNames

tsx

type AppBarClassNames = AppBarTheme;

Material guidelines

Place navigation at the leading edge, the screen title next, and relevant actions at the trailing edge. Move less frequent actions into an overflow menu.
Use the responsive toolbar height: 56px on portrait phones, 48px on landscape phones, and 64px on larger screens. Keep icon actions within 48px touch targets.

Material Design 1: Structure