Skip to main content
Design system

App bar

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

Bundle size:Β 578 Bytes
Install:
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage:
import { AppBar } from "@washingtonpost/wpds-ui-kit"
|Copy
Storybook: Β View on Storybook
Source: Β View on Github

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.


Options

Position

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


API Reference

AppBar

PropDescriptionTypeDefaultRequired
positionApp bar's position in time and space
enum
fixed | sticky | absolute | relative
----False
shadowApp bar's shadow in time and space
enum
boolean | true
----False
asWPDS provides an as prop for changing which tag a component outputs.
never
----False
cssWPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.
CSS<{ sm: `(max-width: ${string})`; md: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; lg: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xxl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; notS...
----False