‹ Side menu

Types

Types

The types of side menu.

SectionSide menuDraftDocumented, not reviewed yet: the API can change.

SideMenuElement

Class

Side menus around a center.

class SideMenuElement implements LayoutElement<Uses>

Member	Type	Description
left	left(left: SideMenuSide): SideMenuElement<Uses>
right	right(right: SideMenuSide): SideMenuElement<Uses>
gesture	gesture(openGestureMode: NonNullable<OptionsSideMenu['openGestureMode']>): SideMenuElement<Uses>	Where a swipe opens a menu. iOSiPadOSAndroid (not supported)
animation	animation(animationType: NonNullable<OptionsSideMenu['animationType']>): SideMenuElement<Uses>	iOSiPadOSAndroid (not supported)
ios	ios(build: (menu: SideMenuElement<Uses>) => SideMenuElement<Uses>): SideMenuElement<Uses>	Modifiers for iOS only.
android	android(build: (menu: SideMenuElement<Uses>) => SideMenuElement<Uses>): SideMenuElement<Uses>	Modifiers for Android only.
options	options(options: OptionsSideMenu): SideMenuElement<Uses>	Options of the side menu no modifier covers. The options of screens go on the screens.

Defined in src/api/layout/SideMenu.ts ↗

SideMenuParts

Interface

The parts of a side menu: a screen named alone is a screen in a menu, and gets a stack in the center.

interface SideMenuParts

Member	Type	Description
left	LayoutContent
centerRequired	LayoutContent
right	LayoutContent

Defined in src/api/layout/SideMenu.ts ↗

SideMenuSide

Interface

The settings of one side of a side menu, the same type for sideMenu.left and sideMenu.right. The left menu opens from the left edge and the right menu from the right edge, also in right-to-left layouts. Only one menu is open at a time: opening one closes the other. The settings apply when the side menu is created, each time a screen of the side menu appears (then all of them anew, with the defaults named below), and at once when they arrive in mergeOptions (then only the fields that arrived). A value from a screen of the center holds while that screen is on top of the center, and afterwards the value of the side menu's own options or the default holds.

interface SideMenuSide

Member	Type	Description
visible	boolean	Whether the menu opens (true) or closes (false), with an animation unless animate is false. It is a one-time command, not a state: it is carried out when it arrives and then forgotten, so a screen that appears later and applies its options again doesn't open or close the menu once more. Opening it while the other menu is open closes the other. It opens the menu also when enabled is false. It does nothing for a menu that isn't on screen to close, or for a side that has no menu, and is ignored in the default options. Set in the layout options, it opens the menu when the side menu first shows. Without it, nothing happens.
animate	boolean	Whether the opening or closing that visible asks for is animated. With false it happens at once and the screens of the menu get the same appearance events in the same order: WillAppear, then DidAppear. It acts only together with visible in the same merge.
enabled	boolean	Whether the user can open the menu with a gesture. With false the gesture doesn't open it, while visible and openMenu still do; a menu that is already open stays open and can be closed by a gesture. It holds while the screen that set it is on top of the center, and a value of the default options counts.
width	number	The width of the menu, in points on iOS and dp on Android. It is capped at the width of the side menu (iOS) and at that width less 64 dp (Android). A change in mergeOptions applies at once, also to an open menu. A width set by a screen of the center acts while that screen shows. Without it, 280 points on iOS and the width of the side menu less 64 dp on Android (the least gap the Material drawer leaves).
height	number	The height of the menu in dp; a menu lower than the container is pinned to the top. A change in mergeOptions applies at once, also to an open menu. Without it, the menu takes the full height under the status bar. iOS doesn't read it. iOS (not supported)iPadOS (not supported)Android
shouldStretchDrawer	boolean	Whether a finger can pull the menu out past its width. With true the menu follows the finger at a quarter of the speed, up to 1.1 times its width, from its outer edge in both open modes; with false it stops at its width. Pulling past the width goes before animationType. iOSiPadOSAndroid (not supported)
animationVelocity	number	The speed in points per second with which the menu moves to its open or closed place. A menu released faster than this moves at the speed of the finger, and the move takes 0.1 seconds at the least. A value of 0 or less counts as the default. iOSiPadOSAndroid (not supported)
openMode	'aboveContent' | 'pushContent'	Where the menu is relative to the center. 'aboveContent' slides the menu over the center, which darkens under it. 'pushContent' keeps the menu under the center, which moves aside by the width of the menu and casts a shadow (see sideMenu.animationType for how the menu itself appears). An unknown string means 'aboveContent'. A change applies at once, to an open menu too. Android always draws the menu over the center. iOSiPadOSAndroid (not supported)
glass	boolean	(iOS 26+) Whether a Liquid Glass layer fills the menu's container, under its screen. The glass shows through only where the screen is transparent, so the screen needs layout.backgroundColor and layout.componentBackgroundColor both 'transparent' and a root view with no background. With 'aboveContent' the center shows through the glass. Below iOS 26 and on Android it does nothing. A change applies at once.
testID	string	The test identifier of this side's container; while the menu is open, the dimming over the center is <testID>.scrim. When it is not set, the identifiers derive from sideMenu.testID.

Defined in src/interfaces/options/sideMenu.ts ↗