Design system

App bar

The App Bar displays information and actions relating to the current screen.

Bundle size: 530 Bytes

Install:

npm install @washingtonpost/wpds-app-bar|Copy

Usage:

import { AppBar } from "@washingtonpost/wpds-app-bar"|Copy

Anatomy

The anatomy of an app bar has no visual elements but rather is an empty container that has a built-in utility to make positioning on a layout easier.

The following position are available sticky relative absolute fixed. The behavior of the different options are described in the MDN web docs.


Open in Playroom

Prop	Description	Type	Default	Required
position	App bar's position in time and space	enum fixed \| sticky \| absolute \| relative	----	False
shadow	App bar's shadow in time and space	enum boolean \| true	----	False