Tray

A positional disclosure surface that slides in from an edge or participates inline. Use a direction variant, then open it with the open attribute, tray-open utility, or a checked toggle slot.

At a glance

Left tray

Navigation, filters, or supporting content.

Bottom tray

Navigation, filters, or supporting content.

Playground

Controls

Direction

Initial state

ClosedOpen

Preview

Workspace

The tray slides over this content from the selected edge.

Toggle tray

Status

Ready

Queued

Owner

Design

Codehtml

<div class="min-w-0 p-5 h-full">
  <div class="flex items-center justify-between gap-4">
    <div>
      <p class="text-sm font-semibold text-on-surface-50">
        Workspace
      </p>
      <p class="text-xs text-on-surface-50/60">
        The tray slides over this content from the selected
        edge.
      </p>
    </div>
    <label
      htmlFor="tray-playground-toggle"
      class="btn-solid/primary cursor-pointer btn-size-sm"
    >
      Toggle tray
    </label>
  </div>
  <div class="mt-6 grid gap-3">
    <div
      class="h-3 w-1/2 rounded-full bg-surface-200/70"
    ></div>
    <div
      class="h-3 w-4/5 rounded-full bg-surface-200/50"
    ></div>
    <div
      class="h-3 w-2/3 rounded-full bg-surface-200/40"
    ></div>
  </div>
  <div class="md:grid-cols-3 mt-6 grid gap-3">
    <div class="rounded-md bg-surface-50/45 p-3">
      <p class="text-xs text-on-surface-50/55">Status</p>
      <p class="text-sm font-semibold text-on-surface-50">
        Ready
      </p>
    </div>
    <div class="rounded-md bg-surface-50/45 p-3">
      <p class="text-xs text-on-surface-50/55">Queued</p>
      <p class="text-sm font-semibold text-on-surface-50">
        12
      </p>
    </div>
    <div class="rounded-md bg-surface-50/45 p-3">
      <p class="text-xs text-on-surface-50/55">Owner</p>
      <p class="text-sm font-semibold text-on-surface-50">
        Design
      </p>
    </div>
  </div>
</div>
<aside
  class="tray-left w-60 rounded-r-lg bg-surface-50 p-5 shadow-xl"
>
  <input
    id="tray-playground-toggle"
    data-slot="toggle"
    type="checkbox"
    defaultChecked="true"
  />
  <div class="flex h-full flex-col gap-4">
    <div>
      <p class="text-sm font-semibold text-on-surface-50">
        Filters
      </p>
      <p class="font-mono text-xs text-on-surface-50/55">
        tray-left
      </p>
    </div>
    <div class="space-y-2 text-xs text-on-surface-50/70">
      <div class="rounded-md bg-surface-100/60 px-3 py-2">
        Navigation
      </div>
      <div class="rounded-md bg-surface-100/60 px-3 py-2">
        Filters
      </div>
      <div class="rounded-md bg-surface-100/60 px-3 py-2">
        Settings
      </div>
    </div>
  </div>
</aside>

Tray

component

Positions the tray and applies the closed transform for the selected direction. The tray opens when it has the open attribute, the tray-open utility, or a checked toggle slot.

Pattern

tray-{variant}

Variant

left/right/top/bottom/inline

Directions

Use tray-left, tray-right, tray-top, or tray-bottom for edge-mounted trays. Give side trays a width and top or bottom trays a height from layout utilities.

tray-left

Left

Navigation, filters, or supporting content.

tray-right

Right

Navigation, filters, or supporting content.

tray-top

Top

Navigation, filters, or supporting content.

tray-bottom

Bottom

Navigation, filters, or supporting content.

Codehtml

<span
  class="inline-flex rounded bg-surface-50/80 px-2 py-1 font-mono text-xs text-on-surface-50/70"
>
  tray-left
</span>
<div
  class="tray-left w-40 tray-open bg-surface-50 p-4 shadow-lg"
>
  <p class="text-sm font-semibold text-on-surface-50">
    Left
  </p>
  <p class="text-xs text-on-surface-50/65">
    Navigation, filters, or supporting content.
  </p>
</div>
<span
  class="inline-flex rounded bg-surface-50/80 px-2 py-1 font-mono text-xs text-on-surface-50/70"
>
  tray-right
</span>
<div
  class="tray-right w-40 tray-open bg-surface-50 p-4 shadow-lg"
>
  <p class="text-sm font-semibold text-on-surface-50">
    Right
  </p>
  <p class="text-xs text-on-surface-50/65">
    Navigation, filters, or supporting content.
  </p>
</div>
<span
  class="inline-flex rounded bg-surface-50/80 px-2 py-1 font-mono text-xs text-on-surface-50/70"
>
  tray-top
</span>
<div
  class="tray-top h-24 tray-open bg-surface-50 p-4 shadow-lg"
>
  <p class="text-sm font-semibold text-on-surface-50">
    Top
  </p>
  <p class="text-xs text-on-surface-50/65">
    Navigation, filters, or supporting content.
  </p>
</div>
<span
  class="inline-flex rounded bg-surface-50/80 px-2 py-1 font-mono text-xs text-on-surface-50/70"
>
  tray-bottom
</span>
<div
  class="tray-bottom h-24 tray-open bg-surface-50 p-4 shadow-lg"
>
  <p class="text-sm font-semibold text-on-surface-50">
    Bottom
  </p>
  <p class="text-xs text-on-surface-50/65">
    Navigation, filters, or supporting content.
  </p>
</div>

Inline

Use tray-inline when the same markup should stay in normal document flow instead of sliding from an edge.

tray-inline

Tray

Navigation, filters, or supporting content.

Content

The inline tray stays beside this content in normal document flow.

Codehtml

<div
  class="tray-inline w-48 shrink-0 rounded-lg bg-surface-50 p-4 shadow-sm"
>
  <div class="mb-3 font-mono text-xs text-on-surface-50/55">
    tray-inline
  </div>
  <p class="text-sm font-semibold text-on-surface-50">
    Tray
  </p>
  <p class="text-xs text-on-surface-50/65">
    Navigation, filters, or supporting content.
  </p>
</div>
<div class="min-w-0 flex-1 rounded-lg bg-surface-50/45 p-4">
  <p class="text-sm font-semibold text-on-surface-50">
    Content
  </p>
  <p class="mt-2 text-xs text-on-surface-50/60">
    The inline tray stays beside this content in normal
    document flow.
  </p>
  <div class="mt-4 space-y-2">
    <div
      class="h-2.5 w-3/4 rounded-full bg-surface-200/65"
    ></div>
    <div
      class="h-2.5 w-1/2 rounded-full bg-surface-200/45"
    ></div>
  </div>
</div>

Open State

modifier

Forces the tray into its open transform. Use it when JavaScript or server-rendered state controls visibility with classes.

Pattern

tray-open

Open utility

Compose tray-open with any directional tray to bypass the closed transform.

closed

Closed

Navigation, filters, or supporting content.

tray-open

Open

Navigation, filters, or supporting content.

Codehtml

<span
  class="inline-flex rounded bg-surface-50/80 px-2 py-1 font-mono text-xs text-on-surface-50/70"
>
  closed
</span>
<div class="tray-left w-40 bg-surface-50 p-4 shadow-lg">
  <p class="text-sm font-semibold text-on-surface-50">
    Closed
  </p>
  <p class="text-xs text-on-surface-50/65">
    Navigation, filters, or supporting content.
  </p>
</div>
<span
  class="inline-flex rounded bg-surface-50/80 px-2 py-1 font-mono text-xs text-on-surface-50/70"
>
  tray-open
</span>
<div
  class="tray-left w-40 tray-open bg-surface-50 p-4 shadow-lg"
>
  <p class="text-sm font-semibold text-on-surface-50">
    Open
  </p>
  <p class="text-xs text-on-surface-50/65">
    Navigation, filters, or supporting content.
  </p>
</div>

Open Controls

Trays can be opened by native attributes, utility classes, or a CSS-only checked input.

Open attribute

Use the native open attribute when the tray is backed by a disclosure or dialog-style state.

open attribute

Open tray

Navigation, filters, or supporting content.

Codehtml

<span
  class="inline-flex rounded bg-surface-50/80 px-2 py-1 font-mono text-xs text-on-surface-50/70"
>
  open attribute
</span>
<details
  open
  class="tray-right w-44 bg-surface-50 p-4 shadow-lg"
>
  <summary class="sr-only">Open tray</summary>
  <p class="text-sm font-semibold text-on-surface-50">
    Open tray
  </p>
  <p class="text-xs text-on-surface-50/65">
    Navigation, filters, or supporting content.
  </p>
</details>

Checked toggle slot

Place a checkbox inside the tray with data-slot="toggle"; when it is checked, the tray opens through :has().

[data-slot="toggle"]:checked

Checked slot

Navigation, filters, or supporting content.

Codehtml

<span
  class="inline-flex rounded bg-surface-50/80 px-2 py-1 font-mono text-xs text-on-surface-50/70"
>
  [data-slot="toggle"]:checked
</span>
<div class="tray-left w-44 bg-surface-50 p-4 shadow-lg">
  <input
    data-slot="toggle"
    type="checkbox"
    checked
    readonly
  />
  <p class="text-sm font-semibold text-on-surface-50">
    Checked slot
  </p>
  <p class="text-xs text-on-surface-50/65">
    Navigation, filters, or supporting content.
  </p>
</div>

Toggle Slot

slot

Add data-slot="toggle" to a checkbox inside the tray to let native checked state control the open transform.

toggle

[data-slot="toggle"]

CSS-only toggle

The input can be visually hidden by the tray while an external label or control toggles it by id.

[data-slot="toggle"]:checked

Checked slot

Navigation, filters, or supporting content.

Codehtml

<span
  class="inline-flex rounded bg-surface-50/80 px-2 py-1 font-mono text-xs text-on-surface-50/70"
>
  [data-slot="toggle"]:checked
</span>
<div class="tray-left w-44 bg-surface-50 p-4 shadow-lg">
  <input
    data-slot="toggle"
    type="checkbox"
    checked
    readonly
  />
  <p class="text-sm font-semibold text-on-surface-50">
    Checked slot
  </p>
  <p class="text-xs text-on-surface-50/65">
    Navigation, filters, or supporting content.
  </p>
</div>

API Reference

Classes

componenttray-{variant}

component

Positions the tray and applies the closed transform for the selected direction. The tray opens when it has the open attribute, the tray-open utility, or a checked toggle slot.

Variant

left/right/top/bottom/inline

componenttray-open

component

Forces the tray into its open transform. Use it when JavaScript or server-rendered state controls visibility with classes.

Slots

slottoggle

slot

Add data-slot="toggle" to a checkbox inside the tray to let native checked state control the open transform.

selector:[data-slot="toggle"]