CSS: drawer-layout

.instui-drawer-layout — A split layout with a collapsible side tray and a primary scrollable content pane.

-placement-end and the default (start) both use flex-direction/inset-inline-* logical properties, not left/right, so the tray's side follows direction/dir="rtl" automatically — no separate RTL rules are needed.

Source: drawer-layout.css

Accessibility

When the tray acts as navigation, label it with an accessible heading or aria-label. Give .content role="region" (InstUI's DrawerLayout convention) and name it with aria-label/aria-labelledby when context alone doesn't identify it.

Usage

@import "@pantoken/components/components.css";
@import "@pantoken/components/drawer-layout.css";

Examples

<div class="instui-drawer-layout" id="drawer" open>
  <aside class="tray">Navigation</aside>
  <main class="content" role="region">Main content</main>
</div>

Structure

.instui-drawer-layout
  drawer-layout.tray (component)
  drawer-layout.content (component)

flowchart TD n0[".instui-drawer-layout"]:::cssdoc-root n1(["drawer-layout.tray"]):::cssdoc-component n2(["drawer-layout.content"]):::cssdoc-component n0 --> n1 n0 --> n2 click n1 "/api/css/drawer-layout.tray.md" click n2 "/api/css/drawer-layout.content.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modifiers

Modifier	Description
.-open	Show the tray even when the open attribute is absent.
.-placement-end	Dock the tray on the inline-end side.
.-placement-start	Dock the tray on the inline-start side (the default; sets it explicitly).
.-should-overlay-tray	Interaction — Render the tray as an overlay instead of shrinking content inline.

Parts

Part	Description
.content	The main pane.
.tray	The side panel.

Custom properties

Property	Type	Default	Description
--pantoken-bp-md	—	—	Width threshold for overlay mode (30em, themed via responsive utilities).

Browser support

• The drawer-layout.tray/drawer-layout.content members switch to overlay mode automatically via a @container query once this element's inline-size drops below tray-width + --pantoken-bp-md. The @pantoken/interactions behavior additionally toggles [should-overlay-tray]/.-should-overlay-tray (a manual override) and emits overlaytraychange for apps that need the change as an event.

Subcomponents

• drawer-layout.content
• drawer-layout.tray
• tray

Related

• tray — A standalone edge overlay; this layout keeps tray and content in the same flow.
• context-view — A smaller anchored surface for contextual actions and detail.