pattern @community/pattern-drawer-side

Drawer Side

A panel that slides in from the right (or left) edge of the viewport, overlaying or pushing content. Used for detail inspectors, edit forms, and mobile nav menus where context-with-task is more important than full focus.

Skill: @community
Domain: frontend-design
Version: 1.0.0
Quality: 4.0
Edges: 15 out · 5 in
Tokens: 69/686/1356

$ prime install @community/pattern-drawer-side

Projection

3 levels · agent picks one per query

Always in _index.xml · the agent never has to ask for this.

DrawerSide [pattern] v1.0.0

Loaded when retrieval picks the atom as adjacent / supporting.

DrawerSide [pattern] v1.0.0

Facts

Label

Side Drawer

Problem

Modals interrupt and lose context; full-page navigation loses scroll position. When users need to inspect or edit a related item without leaving the current view, a side panel preserves both context and task.

Solution

A 360-720px wide panel sliding in from a viewport edge, with a backdrop scrim. Includes a header (title + close), scrollable body, and sticky footer for primary actions.

Structure

    <div class="drawer-backdrop" aria-hidden="true"></div>
    <aside
      role="dialog"
      aria-modal="true"
      aria-labelledby="dr-title"
      class="drawer"
      data-side="right"
    >
      <header>
        <h2 id="dr-title">PRM-1024 Fix login redirect</h2>
        <button aria-label="Close drawer" class="close">
          <svg aria-hidden="true"></svg>
        </button>
      </header>
      <div class="drawer-body">
        <dl>
          <dt>Status</dt><dd>In Progress</dd>
          <dt>Assignee</dt><dd>Kevin Hou</dd>
          <dt>Priority</dt><dd>P1</dd>
        </dl>
        <section aria-labelledby="comments-h">
          <h3 id="comments-h">Comments</h3>
          <ol>
            <li><article>...</article></li>
          </ol>
        </section>
      </div>
      <footer class="drawer-footer">
        <button>Save</button>
        <button class="primary">Mark complete</button>
      </footer>
    </aside>

Uses

@community/method-heuristic-review

Behavior

Slide in from edge over 200-260ms ease-out; honor prefers-reduced-motion.
Body scroll locks while drawer open (overflow:hidden on body).
Esc closes; clicking scrim closes if no unsaved changes (otherwise prompt confirm).
Trap focus inside the drawer while open; restore focus on close.
Width: 360-480px on desktop for inspector use cases; 720-960px for full edit forms; 100% on mobile.
Resizable variant: drag the leading edge to adjust width; persist to localStorage.
Multiple drawers: stack with progressively darker scrims; Esc closes the topmost only.

A11y

Use role='dialog' with aria-modal='true' and aria-labelledby pointing to the drawer title.
Provide a close button with accessible name 'Close drawer' (or 'Close ').</li> <li>Trap focus inside; on close, return focus to the trigger element.</li> <li>Backdrop has <code>aria-hidden='true'</code> and is not focusable; clicking it dispatches close.</li> <li>Honor <code>prefers-reduced-motion: reduce</code> by replacing slide with instant appearance.</li> </ul> </div> </div> <div class="proj-panel" data-panel="full" hidden data-astro-cid-ztpy2nk5> <p class="proj-when" data-astro-cid-ztpy2nk5>Loaded when retrieval picks the atom as a focal / direct hit.</p> <div class="atom-prose" data-astro-cid-ztpy2nk5><h1>DrawerSide [pattern] v1.0.0</h1> <p>A panel that slides in from the right (or left) edge of the viewport, overlaying or pushing content. Used for detail inspectors, edit forms, and mobile nav menus where context-with-task is more important than full focus.</p> <h2>Facts</h2> <h2>Label</h2> <p>Side Drawer</p> <h2>Problem</h2> <p>Modals interrupt and lose context; full-page navigation loses scroll position. When users need to inspect or edit a related item without leaving the current view, a side panel preserves both context and task.</p> <h2>Solution</h2> <p>A 360-720px wide panel sliding in from a viewport edge, with a backdrop scrim. Includes a header (title + close), scrollable body, and sticky footer for primary actions.</p> <h2>Structure</h2> <pre><code> <div class="drawer-backdrop" aria-hidden="true"></div> <aside role="dialog" aria-modal="true" aria-labelledby="dr-title" class="drawer" data-side="right" > <header> <h2 id="dr-title">PRM-1024 Fix login redirect</h2> <button aria-label="Close drawer" class="close"> <svg aria-hidden="true"></svg> </button> </header> <div class="drawer-body"> <dl> <dt>Status</dt><dd>In Progress</dd> <dt>Assignee</dt><dd>Kevin Hou</dd> <dt>Priority</dt><dd>P1</dd> </dl> <section aria-labelledby="comments-h"> <h3 id="comments-h">Comments</h3> <ol> <li><article>...</article></li> </ol> </section> </div> <footer class="drawer-footer"> <button>Save</button> <button class="primary">Mark complete</button> </footer> </aside> </code></pre> <h2>Uses</h2> <ul> <li>@community/method-heuristic-review</li> </ul> <h2>Behavior</h2> <ul> <li>Slide in from edge over 200-260ms ease-out; honor <code>prefers-reduced-motion</code>.</li> <li>Body scroll locks while drawer open (overflow:hidden on body).</li> <li>Esc closes; clicking scrim closes if no unsaved changes (otherwise prompt confirm).</li> <li>Trap focus inside the drawer while open; restore focus on close.</li> <li>Width: 360-480px on desktop for inspector use cases; 720-960px for full edit forms; 100% on mobile.</li> <li>Resizable variant: drag the leading edge to adjust width; persist to localStorage.</li> <li>Multiple drawers: stack with progressively darker scrims; Esc closes the topmost only.</li> </ul> <h2>A11y</h2> <ul> <li>Use <code>role='dialog'</code> with <code>aria-modal='true'</code> and <code>aria-labelledby</code> pointing to the drawer title.</li> <li>Provide a close button with accessible name 'Close drawer' (or 'Close <title>').</li> <li>Trap focus inside; on close, return focus to the trigger element.</li> <li>Backdrop has <code>aria-hidden='true'</code> and is not focusable; clicking it dispatches close.</li> <li>Honor <code>prefers-reduced-motion: reduce</code> by replacing slide with instant appearance.</li> </ul> <h2>Examples</h2> <ul> <li>@community/example-linear-issue-drawer</li> <li>@community/example-vercel-deploy-drawer</li> <li>@community/example-shopify-product-drawer</li> </ul> <h2>Label</h2> <p>Side Drawer</p> <h2>Problem</h2> <p>Modals interrupt and lose context; full-page navigation loses scroll position. When users need to inspect or edit a related item without leaving the current view, a side panel preserves both context and task.</p> <h2>Solution</h2> <p>A 360-720px wide panel sliding in from a viewport edge, with a backdrop scrim. Includes a header (title + close), scrollable body, and sticky footer for primary actions.</p> <h2>Structure</h2> <pre><code> <div class="drawer-backdrop" aria-hidden="true"></div> <aside role="dialog" aria-modal="true" aria-labelledby="dr-title" class="drawer" data-side="right" > <header> <h2 id="dr-title">PRM-1024 Fix login redirect</h2> <button aria-label="Close drawer" class="close"> <svg aria-hidden="true"></svg> </button> </header> <div class="drawer-body"> <dl> <dt>Status</dt><dd>In Progress</dd> <dt>Assignee</dt><dd>Kevin Hou</dd> <dt>Priority</dt><dd>P1</dd> </dl> <section aria-labelledby="comments-h"> <h3 id="comments-h">Comments</h3> <ol> <li><article>...</article></li> </ol> </section> </div> <footer class="drawer-footer"> <button>Save</button> <button class="primary">Mark complete</button> </footer> </aside> </code></pre> <h2>Uses</h2> <ul> <li>@community/method-heuristic-review</li> </ul> <h2>Behavior</h2> <ul> <li>Slide in from edge over 200-260ms ease-out; honor <code>prefers-reduced-motion</code>.</li> <li>Body scroll locks while drawer open (overflow:hidden on body).</li> <li>Esc closes; clicking scrim closes if no unsaved changes (otherwise prompt confirm).</li> <li>Trap focus inside the drawer while open; restore focus on close.</li> <li>Width: 360-480px on desktop for inspector use cases; 720-960px for full edit forms; 100% on mobile.</li> <li>Resizable variant: drag the leading edge to adjust width; persist to localStorage.</li> <li>Multiple drawers: stack with progressively darker scrims; Esc closes the topmost only.</li> </ul> <h2>A11y</h2> <ul> <li>Use <code>role='dialog'</code> with <code>aria-modal='true'</code> and <code>aria-labelledby</code> pointing to the drawer title.</li> <li>Provide a close button with accessible name 'Close drawer' (or 'Close <title>').</li> <li>Trap focus inside; on close, return focus to the trigger element.</li> <li>Backdrop has <code>aria-hidden='true'</code> and is not focusable; clicking it dispatches close.</li> <li>Honor <code>prefers-reduced-motion: reduce</code> by replacing slide with instant appearance.</li> </ul> <h2>Compatible</h2> <ul> <li>@community/pattern-modal-confirm</li> <li>@community/pattern-tab-bar-bottom</li> </ul> </div> </div> </section> <section class="atom-section" data-astro-cid-ztpy2nk5> <header class="atom-section-h" data-astro-cid-ztpy2nk5> <h2 data-astro-cid-ztpy2nk5>Source</h2> <span class="atom-section-meta" data-astro-cid-ztpy2nk5>where the compiled artifact came from</span> </header> <pre class="atom-source" data-astro-cid-ztpy2nk5><code data-astro-cid-ztpy2nk5>prime-system/examples/frontend-design/primes/compiled/@community/pattern-drawer-side/atom.yaml</code></pre> <p class="atom-source-meta" data-astro-cid-ztpy2nk5>Compiled at <strong data-astro-cid-ztpy2nk5>2026-05-07</strong></p> </section> </main> <aside class="atom-side" aria-label="Edges and graph" data-astro-cid-ztpy2nk5> <div class="atom-side-card" data-astro-cid-ztpy2nk5> <div class="atom-side-graph" data-astro-cid-ztpy2nk5> <figure class="mini-graph" aria-label="Related atoms graph" data-astro-cid-fdlvampy><svg viewBox="0 0 480 300" role="img" aria-labelledby="graph-title" data-astro-cid-fdlvampy><title id="graph-title">Edges from @community/pattern-drawer-sidepattern-modal-conf…pattern-tab-bar-bo…anti-pattern-invis…check-focus-visiblecheck-mobile-firstcheck-touch-target…counter-example-di…anti-pattern-modal…pattern-modal-non-…pattern-tab-bar-bo…pattern-drawer-side
15 outgoing · 5 incoming

Outgoing 15

compatible 2

related 13

Incoming 5

compatible 1

@community/pattern-tab-bar-bottom

related 4