Top app bars

Top app bars display navigation, actions, and text at the top of a screen

design_services
Guidelines

Usage

Use a top app bar to provide content and actions related to a current screen, such as navigation, screen headlines, and actions.

The information and actions offered are primarily contextual and specific to a screen, but may also include access to key cross-app journeys.

Instalation

Copy and paste the following code into your project.

import * as React from 'react'

import { cn } from '@/lib/utils'

const TopAppBarRoot = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn('sticky top-0 z-30', className)} {...props} />
))
TopAppBarRoot.displayName = 'TopAppBarRoot'

const TopAppBarToolBar = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('flex h-16 w-full items-center bg-surface', className)}
    {...props}
  />
))
TopAppBarToolBar.displayName = 'TopAppBarToolBar'

const TopAppBarHeadline = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <h1
    ref={ref}
    className={cn(
      'line-clamp-1 grow px-2 text-title-lg text-onSurface',
      className
    )}
    {...props}
  />
))
TopAppBarHeadline.displayName = 'TopAppBarHeadline'

const LeadingSection = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      'ml-2 mr-1 flex shrink-0 items-center justify-center text-onSurface',
      className
    )}
    {...props}
  />
))

const TrailingSection = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      'ml-1 mr-2 flex shrink-0 items-center justify-center gap-2 text-onSurfaceVariant',
      className
    )}
    {...props}
  />
))

const TopAppBar = Object.assign(TopAppBarRoot, {
  Toolbar: TopAppBarToolBar,
  Headline: TopAppBarHeadline,
  LeadingSection,
  TrailingSection,
})

export {
  TopAppBar,
  TopAppBarToolBar,
  TopAppBarHeadline,
  LeadingSection,
  TrailingSection,
}

Update the import paths to match your project setup.

Examples

Center-aligned top app bar

Summer Hits

import { Icon } from '@/components/ui/icon'
import { IconButton } from '@/components/ui/icon-button'
import { TopAppBar } from '@/components/ui/top-app-bar'

export const CenterAlignedTopAppBar = () => {
  return (
    <TopAppBar>
      <TopAppBar.Toolbar>
        <TopAppBar.LeadingSection>
          <IconButton variant="standard">
            <Icon symbol="menu" />
          </IconButton>
        </TopAppBar.LeadingSection>
        <TopAppBar.Headline className="px-6 text-center">
          Summer Hits
        </TopAppBar.Headline>
        <TopAppBar.TrailingSection>
          <IconButton variant="standard">
            <Icon symbol="account_circle" className="font-filled" />
          </IconButton>
        </TopAppBar.TrailingSection>
      </TopAppBar.Toolbar>
    </TopAppBar>
  )
}

Small top app bar

Thrift Stores in LA

import { Icon } from '@/components/ui/icon'
import { IconButton } from '@/components/ui/icon-button'
import { TopAppBar } from '@/components/ui/top-app-bar'

export const SmallTopAppBar = () => {
  return (
    <TopAppBar>
      <TopAppBar.Toolbar>
        <TopAppBar.LeadingSection>
          <IconButton variant="standard">
            <Icon symbol="arrow_back" />
          </IconButton>
        </TopAppBar.LeadingSection>
        <TopAppBar.Headline>Thrift Stores in LA</TopAppBar.Headline>
        <TopAppBar.TrailingSection>
          <IconButton variant="standard">
            <Icon symbol="attach_file" className="font-filled" />
          </IconButton>
          <IconButton variant="standard">
            <Icon symbol="today" className="font-filled" />
          </IconButton>
          <IconButton variant="standard">
            <Icon symbol="more_vert" className="font-filled" />
          </IconButton>
        </TopAppBar.TrailingSection>
      </TopAppBar.Toolbar>
    </TopAppBar>
  )
}

Medium top app bar

Saved podcasts

import { Icon } from '@/components/ui/icon'
import { IconButton } from '@/components/ui/icon-button'
import { TopAppBar } from '@/components/ui/top-app-bar'

export const MediumTopAppBar = () => {
  return (
    <TopAppBar>
      <TopAppBar.Toolbar>
        <TopAppBar.LeadingSection>
          <IconButton variant="standard">
            <Icon symbol="arrow_back" />
          </IconButton>
        </TopAppBar.LeadingSection>
        <div className="grow" />
        <TopAppBar.TrailingSection>
          <IconButton variant="standard">
            <Icon symbol="attach_file" className="font-filled" />
          </IconButton>
          <IconButton variant="standard">
            <Icon symbol="today" className="font-filled" />
          </IconButton>
          <IconButton variant="standard">
            <Icon symbol="more_vert" className="font-filled" />
          </IconButton>
        </TopAppBar.TrailingSection>
      </TopAppBar.Toolbar>
      <TopAppBar.Toolbar className="px-4 pb-6">
        <TopAppBar.Headline className="text-headline-sm">
          Saved podcasts
        </TopAppBar.Headline>
      </TopAppBar.Toolbar>
    </TopAppBar>
  )
}

Large top app bar

The best sushi spots in Los Angeles and Orange County

import { Icon } from '@/components/ui/icon'
import { IconButton } from '@/components/ui/icon-button'
import { TopAppBar } from '@/components/ui/top-app-bar'

export const LargeTopAppBar = () => {
  return (
    <TopAppBar>
      <TopAppBar.Toolbar>
        <TopAppBar.LeadingSection>
          <IconButton variant="standard">
            <Icon symbol="arrow_back" />
          </IconButton>
        </TopAppBar.LeadingSection>
        <div className="grow" />
        <TopAppBar.TrailingSection>
          <IconButton variant="standard">
            <Icon symbol="attach_file" className="font-filled" />
          </IconButton>
          <IconButton variant="standard">
            <Icon symbol="today" className="font-filled" />
          </IconButton>
          <IconButton variant="standard">
            <Icon symbol="more_vert" className="font-filled" />
          </IconButton>
        </TopAppBar.TrailingSection>
      </TopAppBar.Toolbar>
      <TopAppBar.Toolbar className="h-24 items-end px-4 pb-7">
        <TopAppBar.Headline className="text-headline-md">
          The best sushi spots in Los Angeles and Orange County
        </TopAppBar.Headline>
      </TopAppBar.Toolbar>
    </TopAppBar>
  )
}
arrow_back Tabs Checkbox arrow_forward