NavigationDrawer

NAVIGATION · 77 / 89

NavigationDrawer

NavigationDrawer — a Material You navigation component for React Native and web.

󱀫

packages/ui/src/components/NavigationDrawer.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

Properties

2 controls

Variant

Title

Usage

NavigationDrawer.tsx

Variants

The states and shapes this component is meant to be used in.

Standard

Inline, beside the content on expanded windows.

Modal

Over the content with a scrim; Escape and Android back close it.

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

9 on NavigationDrawerProps

Filter props

󰍉

children

required

React.ReactNode

`DrawerSection`s and/or `DrawerItem`s.

footer

React.ReactNode

Pinned below the scrolling items.

onDismiss

() => void

Modal only: called on scrim press, Android back and Escape (web).

style

StyleProp<ViewStyle>

testID

string

title

string

Headline at the top of the drawer.

variant

"standard" | "modal"

default: "standard"

`"standard"` is an inline panel to place beside the content (expanded windows and up). `"modal"` slides over the content with a scrim. Defaults to `"standard"`.

visible

boolean

default: false

Modal only: whether the drawer is open.

width

number

default: DRAWER_WIDTH

Defaults to 360 (M3), capped at the window width when modal.

󰅁

󰅂