Navigation Drawer
The Navigation Drawer is a side panel that slides in from the edge of the screen, giving users access to your app's key pages without taking up permanent screen space. It pairs well with the App Bar — typically triggered by a hamburger menu icon — and is a familiar navigation pattern that makes your app feel native.
Drawer Background Color
Set the background color of the drawer panel for both Light and Dark themes.
- Light Mode default:
#ffffff - Dark Mode default:
#021411
The drawer background also supports 8-digit HEX codes to add alpha transparency, allowing your page content to remain partially visible behind the open drawer.
| Transparency | Example HEX | Effect |
|---|---|---|
| 100% (fully opaque) | #000000FF | Content completely hidden behind drawer |
| 75% | #000000BF | Content slightly visible |
| 50% | #00000080 | Content half-visible |
| 25% | #00000040 | Subtle overlay, content clearly visible |
| 0% (fully transparent) | #00000000 | Drawer fully see-through |
Position
Choose which side the drawer slides in from.
| Option | Description |
|---|---|
| Left | Drawer opens from the left edge (default) |
| Right | Drawer opens from the right edge |
Right-side placement can be useful for right-to-left language layouts or specific design preferences.
Drag Gesture
When enabled, users can swipe in from the edge of the screen to open the drawer — in addition to tapping a button. This gives the app a more fluid, native feel.
- Default: Enabled
Header
The drawer header sits at the top of the panel and is a good place to reinforce your brand with a logo, app name, and tagline.
Logo
Toggle whether a logo is shown in the drawer header.
- Default: Disabled
When enabled, upload a logo image:
- Accepted formats: JPG, JPEG, PNG
- Maximum file size: 2 MB
- Logo Width & Height: 90–150 px (default: 120 px)
Header Colors
| Element | Light Mode default | Dark Mode default |
|---|---|---|
| Header Background | #186E62 | #186E62 |
| Header Text | #ffffff | #ffffff |
Header Text
| Field | Default | Max length |
|---|---|---|
| Header Title | App Name | 150 characters |
| Header Secondary Title | Slogan of the App | 250 characters |
The title and secondary title appear below the logo in the header area. Use them to display your app name and a short description or tagline.
Menu Items Style
| Element | Light Mode default | Dark Mode default |
|---|---|---|
| Menu Text Color | #000000 | #ffffff |
| Menu Icon Color | #000000 | #ffffff |
These colors apply to all navigation items in the drawer list.
Navigation Items
Each item in the drawer has three parts:
- Icon — Tap the icon button to open the icon picker and choose a Material Icon.
- Title — The label shown next to the icon.
- Action URL — The page that opens when the user taps the item.
Add as many items as you need to cover your app's main destinations — such as Home, About, Account, and Contact.
Dropdown / Submenu Grouping
Navigation items can be grouped into collapsible dropdowns by using the ^^ prefix in the item Title field.
Any item whose title starts with ^^ becomes a child of the nearest preceding item that does not use the prefix — that parent item is automatically turned into a collapsible group header.
Example setup:
| Title | Action URL |
|---|---|
Shop | example.com/shop |
^^Men | example.com/shop/men |
^^Women | example.com/shop/women |
^^Kids | example.com/shop/kids |
Contact | example.com/contact |
This renders Shop as a group header with Men, Women, and Kids nested under it. Tapping Shop expands or collapses the group.
^^ prefix is stripped from the visible label — users only see Men, Women, and Kids in the list.Visibility Rules
You can control which pages show the navigation drawer and which pages hide it.
Show Navigation Drawer Only on These URLs
The drawer will only be accessible when the current URL matches one of the patterns you specify. On all other pages, the drawer is hidden.
Hide Navigation Drawer on These URLs
The drawer is accessible everywhere except on pages that match the patterns you specify.
Enter one domain, full URL, or URL fragment per line. Both fields support wildcard patterns (*) for dynamic paths and square brackets [ ] for exact URL matches.
| Example | Matches |
|---|---|
example.com/dashboard | Any URL containing /dashboard |
[example.com/login] | Only the exact URL example.com/login |
example.com/*/profile | URLs like example.com/user/profile, example.com/1/profile |
Runtime Update via JavaScript Bridge
You can update the drawer's header and navigation items at runtime from your website JavaScript — for example, to personalize the drawer after a user logs in. See Updating Navigation Drawer at Runtime for full implementation details.