Updated
Drawer
Drawer holds navigation off screen and slides it in when you need it, pushing the screen aside as a card.
Updated
Preview
The drawer opens at the leading edge and the screen moves aside as a rounded card. Open it from the button, and dismiss it by tapping what is left of the screen or with Escape.
The drawer is a fixed 852 high and 300 wide, padded 64 12 32 12, and has no rounded corners of its own because its leading edge sits off screen.
Sections and Compact pin two actions to the bottom edge of the 852, over a fade, so the list scrolls underneath them. The block pads its bottom by grid/safe-area/bottom, which is 34 on iPhone and 24 on Android, so the buttons clear the home indicator and the gesture bar.
Opening the drawer pushes the screen 300 to the right, and 93 of it stays in view as a card at radius 44 with a 1 hairline and dropShadow/2xl. The drawer under it carries dropShadow/lg in the example screens.
Source: the Navigation Drawer set of the Appetite UI Figma file, read on October 2, 2026.
Which layouts does Drawer have?
Five layouts share one shell and one row component. Pick the layout by what your app puts first: destinations, conversations, a person, your own content, or a workspace.
| Layout | What it holds | Use it for |
|---|---|---|
| Sections | A Top row with a title and search, six icon rows, a Recents group, and two pinned actions | An app with a few destinations and a history |
| Compact | A Top row, groups named Today, Yesterday and Previous 7 days with text only rows, and two pinned actions | A chat list |
| Profile | A profile block with avatar, name, handle and stats, six Large rows, three rows with a Chevron, and two utility buttons | A drawer that leads with the account |
| Slot | A Top row, a native slot 276 wide and 636 high, and an Account row | Content of your own between the two |
| Workspace | A workspace switcher and a new page button, Quick rows, and Favorites, Teamspaces and Private groups with nested rows | Apps built around pages and teams |
Slot is a native Figma slot between the Top row and the Account row, and everything in it is yours to fill. The pink dashes in the specimen mark the empty slot and are not part of the component.
Icons swapped into a row keep their own ink: fg/sub-700 in Sections, fg/strong-950 in Profile and Workspace, and a state color on five Workspace rows.
The Navigation Drawer set holds 5 layouts.
How tall is a Drawer row?
A row, the internal _Drawer Item, is 44, 48 or 52 high. Every line in a layout is that one component, on three axes: Size sets the height, State says how the row is doing, Trailing says what it opens.
Size
State
Trailing
Small is 44 high with a 16/24 label and its icon at 20, Default is 48 with 18/28 and its icon at 24, and Large is 52 with a 20/28 Semi Bold label and its icon at 24 on fg/strong-950. The radius is 12 on all of them.
Pressed is bg/soft-100 and Active is bg/weak-50, and Active lifts the icon to fg/strong-950 without changing the weight. Accent turns the icon and the label brand/base on no fill, with the label Semi Bold on Small and Large and Regular on Default.
More and Badge pull the right padding from 12 to 8. A Badge trailing holds a Badge at State Information, Type Pill, Style Color, with a count.
The Chevron and More glyphs stay on fg/soft-500 in every state, so the trailing mark never carries the state. A Chevron points down on an expanded row, as on Design in the Workspace layout.
Source: the _Drawer Item set of the Appetite UI Figma file, read on October 3, 2026.
Properties
The row carries the properties. The drawer has one variant axis and one slot.
| Set | Property | Type | Default |
|---|---|---|---|
| Navigation Drawer | Layout | Sections | Compact | Profile | Slot | Workspace | Sections |
| Navigation Drawer | Slot | Slot | empty |
| _Drawer Item | Size | Default | Large | Small | Small |
| _Drawer Item | Trailing | None | Chevron | More | Badge | None |
| _Drawer Item | State | Default | Pressed | Active | Accent | Default |
| _Drawer Item | Label | Text | Drawer item |
| _Drawer Item | Icon | Boolean | true |
| _Drawer Item | Icon Swap | Instance swap | folder |
Label is one line and truncates rather than wraps. Icon turns the leading slot off, which is how the Recents and chat rows run.
_Drawer Item holds 48 variants: Size by Trailing by State, with no holes. The underscore keeps it out of the Assets panel, so it reaches you inside the five layouts.
Tokens
Every color is bound to a variable and turns with the mode.
| Token | Light | Dark | Applied to |
|---|---|---|---|
bg/white-0 | #FFFFFF | #0E0E0F | The drawer and the Actions surface |
bg/weak-50 | #F4F5F5 | #242427 | Active row |
bg/soft-100 | #E9E9EA | #48484A | Pressed row |
border/soft-100 | #E9E9EA | #2F2F31 | Divider and the Outline icon button |
brand/base | #155DFC | #2B7FFF | Accent row, workspace mark, Chat button |
fg/strong-950, text/strong-950 | #0E0E0F | #FFFFFF | Titles, labels, an Active icon |
fg/sub-700 | #48484A | #C7C7CC | Icon at rest |
fg/soft-500, text/soft-500 | #8E8E93 | #AEAEB2 | Chevron, More, plan line, small headers |
state/information/base-500 | #155DFC | #155DFC | Badge, one value in both modes |
text/on-color/strong | #FFFFFF | #FFFFFF | Badge count |
The pushed screen card is radius 44 on bg/white-0 with a border/soft-100 hairline. The row radius 12 is dimensions/radius/lg, the top padding of 64 is dimensions/spacing/16, and a Badge casts dropShadow/xs.
Row icons are stroke 1.75, the Profile and Workspace icons 2, and the badge-check beside the Profile name is 1.5 on brand/base.
How does Drawer differ on iOS and Material 3?
Apple and Material both favor a bar over a drawer for primary navigation. Appetite UI Drawer is for the app that keeps destinations, history or a workspace off screen.
| Appetite UI | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Navigation Drawer | None in the Apple Platform pages. iOS puts primary destinations in iOS / Tab Bar. | None in the Material 3 pages. The nearest are M3 / Navigation bar and M3 / Side Sheet, 320 wide in Standard and Modal. | Appetite UI Drawer is 300 wide with five layouts and a pinned action block, and it is built for the leading edge on both platforms. |
A row is 44, 48 or 52 high. Small clears the 44 pt minimum touch target on iOS and sits under the 48 dp one on Android, both in platform/min-touch-target, so on Android use Default or Large.
When should I use a Drawer?
Use a Drawer when an app keeps destinations, history or a workspace off screen. Two emphasis states, used once each, keep it readable.
Do
One Accent row for the action that starts something, one Active row for the conversation on screen.
Don't
Accent on more than one row. Emphasis spread across the list is emphasis spent, and the row that acts stops standing out.
Pick the trailing mark for the gesture: a Chevron on a row that opens another list, More on a row with its own menu, a Badge for a count, nothing on a row that simply goes somewhere. Rows in a history run with Icon off, so the entries read as text.