Overview

The Control Navigation Drawer action (controlDrawerNavigator) targets the app-level navigation drawer — the slide-out navigation shell you set up in Settings → Development → Navigation. An app has exactly one navigation drawer, so the action has no target field. This is distinct from the Control Drawer action (controlDrawer), which targets content-level Drawer blocks placed on individual pages; see UI Control Actions.

Parameters

Note: Mobile gesture support: On mobile, the navigation drawer can also be opened by a swipe-from-edge gesture (if enabled in navigation settings). The action works alongside gesture control — Show always opens the drawer and Hide always closes it, whatever its current state.

Step-by-Step Usage Guide

1. Use the Drawer navigation style: Go to Settings → Development → Navigation, open the Appearance tab and set Navigation Style to Drawer. Configure your menu items on the Content tab. The drawer is now available at the app shell level. Drawer is a mobile navigation style; in a web app, the action opens and closes the app's side navigation.

2. Add a hamburger button to your header: In the page header bar (or App Header component), add an Icon Button with a hamburger or menu icon. This button will be the primary entry point for opening the navigation drawer.

3. Wire the button's event: In the button's On Click event, add a Control Navigation Drawer action and set Operation to Show. To close the drawer from your own control, add a separate Control Navigation Drawer action with Operation set to Hide on that control's event. If one button must do both, gate the two actions with a page variable that tracks whether the drawer is open.

4. Close on navigation: The built-in drawer closes itself after the user taps a navigation item. If your drawer is a custom navigation module (a module you built and assigned as the app's navigation; see Custom Navigation Module), add a Control Navigation Drawer action with Operation set to Hide after the Go to Page action on each item's On Click event.

Best Practices

• Wire Show and Hide to separate triggers — there is no toggle, so use a page variable if one button must both open and close the drawer.

• Close on backdrop tap — the navigation drawer closes when the user taps the dimmed backdrop by default.

• Avoid opening programmatically on page load — auto-opening the drawer on onPageLoad is disorienting for returning users. Reserve it for intentional interactions.

Examples

Open the navigation drawer from a hamburger button

{ "actionType": "controlDrawerNavigator", "payload": { "operation": "show" } }

Close the navigation drawer

{ "actionType": "controlDrawerNavigator", "payload": { "operation": "hide" } }