# M3 modal navigation drawer > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A **modal navigation drawer** for "Nord Post", a parcel-and-mail app, in Material 3 Expressive on a cool light scheme. A hamburger in the top app bar slides a 360px drawer in from the left over a 40% scrim. The drawer holds a product header, two labelled sections divided by hairlines, nine destinations, count badges and one tertiary "3 today" pill. The active destination is a full-width 56px pill in the secondary container colour — a wide, tonal shape rather than an indicator line. The detail worth copying is the asymmetric timing: 400ms emphasized in, 250ms accelerated out, with focus trapped inside while open and returned to the hamburger on close. ## Reference behaviour 1. Initial state (hero): the drawer is **already open** (`body.open` in the markup, hamburger `aria-expanded="true"`) over the inbox: top app bar (surface-low, 118px including the 54px status clearance) with hamburger, "Inbox" title (22px), search and account icons; grouped rows of deliveries and letters with 40px badge tiles behind the scrim. No focus is moved on load. 2. After closing it (step 6), tap the hamburger (48px round icon button): `body.open` is set, `aria-expanded` becomes true. Scrim fades in to `rgba(27,27,34,.4)` and the drawer translates from −100% to 0 over 400ms `cubic-bezier(.2,0,0,1)`, gaining a soft shadow. Focus moves to the current-page link. 3. The drawer: 360px wide, rounded 16px on its right corners only, 54px top padding, 34px bottom padding, scrolls internally if needed. Header row: 36px indigo mark "NP", product name (18px/600), user line (12px), and a close icon button. Then `h2` "Mail" with four links, a divider, `h2` "Sending" with three links, a divider, two utility links. 4. Hover a link: a 6% `--on-surface` state layer appears; pressing raises it to 12%. 5. Tap a link: it becomes `aria-current="page"` (pill fill `--secondary-c`, text `--on-secondary-c`, weight 600, icon stroke 2.2); the app bar title changes to the link's label; the drawer closes; a dark snackbar "Opened Deliveries" rises at the bottom for 1.6s. 6. Tap the scrim, the drawer's close button or press Esc: drawer translates back to −100% over 250ms `cubic-bezier(.3,0,.8,.15)`, scrim fades on the same clock, focus returns to the element that opened it. 7. Tab and Shift+Tab cycle only through the close button and the nine links while open. ## Structure ``` 390 × 844 ┌────────────────────────────────────┐ │ (54px clearance) │ │ ≡ Inbox ○ ○ │ app bar 64px + 54, surface-low │ TODAY │ │ ┌────────────────────────────────┐ │ │ │[PKG] Parcel from Halden… 09:12│ │ rows in a 20px-radius group │ │[LTR] Skatteverket 08:30│ │ │ │[PKG] Return label… 07:55│ │ │ └────────────────────────────────┘ │ │ YESTERDAY │ │ ┌────────────────────────────────┐ │ │ │ ... │ │ │ └────────────────────────────────┘ │ └────────────────────────────────────┘ open state (drawer 360 over a scrim, 30px of scrim visible on the right) ┌───────────────────────────────────╮░┐ │ (54px) │░│ │ [NP] Nord Post × │░│ header │ Karin Ekdahl · Malmö │░│ │ Mail │░│ h2 │ ╭───────────────────────────────╮ │░│ │ │ ▣ Inbox 24 │ │░│ active: full-width pill 56px │ ╰───────────────────────────────╯ │░│ │ ⇩ Deliveries (3 today) │░│ tertiary pill badge │ ▭ Lockers │░│ │ ✎ Drafts 2 │░│ │ ───────────────────────────────── │░│ divider │ Sending │░│ │ ▭ Buy postage │░│ │ ⌖ Find a drop-off │░│ │ ▤ Address book 118 │░│ │ ───────────────────────────────── │░│ │ ⚙ Settings │░│ │ ? Help & feedback │░│ └───────────────────────────────────╯░┘ ``` - `
` — hamburger `