Sheet layout
A sheet layout lets a side sheet open next to the content instead of over it, when there's room. When there isn't, the sheet opens as a modal.
Make the window narrower: the sheet stops sitting beside this text and opens over it.
Built from main 2 minutes ago.
<tk-sheet-layout content-min="240" style="--tk-sheet-size: 280px; min-block-size: calc(var(--space-96) * 3);">
<div>
<tk-button onclick="document.getElementById('deployment').show()">View deployment</tk-button>
<p>Make the window narrower: the sheet stops sitting beside this text and opens over it.</p>
</div>
<tk-sheet id="deployment" heading="Deployment" side="right">
<p>Built from main 2 minutes ago.</p>
<tk-button slot="footer" onclick="this.closest('tk-sheet').close()">Done</tk-button>
</tk-sheet>
</tk-sheet-layout>How it works
<tk-sheet-layout content-min="640">
<main>
<tk-button onclick="document.getElementById('deployment').show()">View deployment</tk-button>
</main>
<tk-sheet id="deployment" heading="Deployment" side="right">
<p>Built from main 2 minutes ago.</p>
</tk-sheet>
</tk-sheet-layout>- Put the page content and a
leftorrightSheet inside the layout. - When the layout is at least
content-minwide plus the sheet's width, the sheet docks: it opens as a column beside the content, and the content narrows. Nothing is covered, and the page stays usable. - When it isn't that wide, the sheet opens as a modal over the page.
- If the width changes while the sheet is open, it switches in place. What someone typed, where they scrolled and where focus was all stay.
- The sheet's
modetells you which one it is:dockedormodal.
Placing the sheet
- Put a
leftsheet before the content and arightsheet after it, so the Tab order matches what people see. - A docked sheet stays
space-8(8px) away from the edges of its column and stays in view while the page scrolls. topandbottomsheets never dock. They open as a modal.- To change the width, set
--tk-sheet-sizeon the sheet. The layout counts it when it decides whether there's room.
When to use
- Use a sheet layout around a page that opens a side panel you'd want to keep open while working: item details, an inspector, filters, a chat or help panel.
- Skip it for a sheet that should always take over the screen, like a short task you want finished before anything else. A sheet on its own always opens as a modal.
- Use a
Sidebar for navigation. A sheet layout is for a panel someone opens and closes. - Use a
Splitter when people drag the boundary between two panels themselves.
Choosing content-min
- Set it to the narrowest your content still works at, not to a screen size. A table with many columns needs more than a form.
- The default is 640px. With the default 440px sheet, a sheet docks once the layout is about 1100px wide.
Do / Don't
| ✅ Do | ❌ Don't |
|---|---|
Set content-min from what your content needs |
Set it from a screen size |
| Use it for panels people keep open while they work | Use it for navigation; use a sidebar |
| Put the sheet where it appears: left before, right after | Put a right sheet before the content |
Related
Sheet : the panel this layout docks.Sidebar : navigation that stays on screen.Splitter : panels people resize themselves.
API
Attributes
| Attribute | Type | Default | What it does |
|---|---|---|---|
content-min |
number (px) | 640 |
the narrowest the content may get; a sheet docks only when there's room for it on top |
Slots
| Slot | Content |
|---|---|
| default | the page content and one or more tk-sheets |
The layout has no events, methods or CSS custom properties. It adds no landmark of its own.
Tokens
The layout draws nothing itself. The docked column uses the space-8 around the panel, and duration-200 with ease-emphasized as the column opens.
Accessibility
Built in:
- A docked sheet is a non-modal dialog named by its heading. The page stays reachable with
Tab and readable by screen readers, and
Esccloses the sheet while focus is inside it. - When there's no room, the sheet is a modal dialog and the page behind is unavailable until it closes.
- Focus returns to the opener when the sheet closes, after any number of switches.
- With reduced motion, the column opens at once.
Your part:
- Put a
leftsheet before the content and arightone after it. - Keep your page landmarks (such as
<main>) inside the content.