App Bar

The top app bar displays navigation, branding, and actions at the top of the screen. It provides consistent access to key actions and serves as a container for the page title.

Overview

App bars are a Material Design component that provides a consistent location for displaying the application title, navigation icon, and action items. They come in several variants including center-aligned, small, medium, and large configurations.

Live Preview

Standard App Bar

House of Brands

Surface App Bar

Page Title

Large App Bar

Large Title

Brand Properties

The following table shows App Bar properties with Material Design 3 defaults and brand-specific values.

Property	Type	Material Default	HoB Value	TAE Value
Container Color	Color	`#6750A4`	`#038012`	`#1A5129`
On Container Color	Color	`#FFFFFF`	`#FFFFFF`	`#FFFFFF`
Height (Small)	Number	`64dp`	`64px`	`64px`
Height (Medium)	Number	`112dp`	`112px`	`112px`
Height (Large)	Number	`152dp`	`152px`	`152px`
Title Font	Font Family	`Roboto`	`Open Sans`	`Open Sans`
Title Size (Small)	Number	`22sp`	`22px`	`22px`
Title Size (Large)	Number	`28sp`	`28px`	`28px`
Leading Icon Size	Number	`24dp`	`24px`	`24px`
Trailing Icon Size	Number	`24dp`	`24px`	`24px`
Horizontal Padding	Number	`16dp`	`16px`	`16px`
Elevation	Number	`0dp - 3dp`	`0 - 4px`	`0 - 4px`

Variants

Center-aligned - Title centered, used for single primary action
Small - Standard top app bar with title on the left
Medium - Expanded height with larger title area
Large - Maximum expansion with prominent title

Behavior

Scrolls with content or remains fixed at top
Can compress from large to small on scroll
Elevation increases on scroll when content passes under
Leading navigation icon opens drawer or navigates back

Accessibility

Use semantic heading elements for titles
Provide descriptive labels for icon buttons
Ensure sufficient color contrast (4.5:1 minimum)
Support keyboard navigation for all interactive elements