> For the complete documentation index, see [llms.txt](https://docs.webstudio.is/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webstudio.is/university/radix/sheet.md).

# Sheet

> Based on [Radix Dialog](https://www.radix-ui.com/primitives/docs/components/dialog)

The Sheet component displays content in a panel that slides in from the edge of the screen. It's an extension of the Dialog component, commonly used for mobile navigation menus, sidebars, and slide-out panels.

## When to Use

Use Sheet for:

* Mobile navigation menus
* Settings panels
* Shopping carts
* Filters and search panels
* Any content that slides in from the side

## Structure

Sheet uses the same structure as [Dialog](/university/radix/dialog.md):

| Component              | Description                                   |
| ---------------------- | --------------------------------------------- |
| **Dialog**             | The root component (Sheet is a styled Dialog) |
| **Dialog Trigger**     | The button that opens the sheet               |
| **Dialog Overlay**     | The backdrop behind the sheet                 |
| **Dialog Content**     | The sliding panel                             |
| **Dialog Title**       | Heading (required for accessibility)          |
| **Dialog Description** | Optional description                          |
| **Dialog Close**       | Button to close the sheet                     |

## How to Use

1. Drag a **Sheet** component from Components > Radix onto your canvas
2. The component comes pre-configured to slide from the right
3. Customize the trigger (often a hamburger menu icon)
4. Add your content inside Dialog Content
5. Style the panel width and slide direction

## Creating Different Slide Directions

Sheet can slide from any edge. Style the Dialog Content:

### Right (Default)

```css
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 300px;
```

### Left

```css
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 300px;
```

### Bottom

```css
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: auto;
```

### Top

```css
position: fixed;
top: 0;
left: 0;
width: 100%;
height: auto;
```

## Properties

Some commonly used properties (see the Settings panel for all available options):

| Property | Description                           |
| -------- | ------------------------------------- |
| **open** | Controls whether the sheet is visible |

## Mobile Navigation Pattern

A common pattern for responsive navigation:

1. Add a Sheet with a hamburger menu trigger
2. Show the trigger only on mobile breakpoints
3. Add your navigation links inside the sheet
4. Hide the regular navigation on mobile

## Related

* [Dialog](/university/radix/dialog.md) – Modal window that overlays the page
* [Popover](/university/radix/popover.md) – Floating panel for interactive content
* [Collapsible](/university/radix/collapsible.md) – Expandable content panel
* [Navigation Menu](/university/radix/navigation-menu.md) – Accessible navigation component


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.webstudio.is/university/radix/sheet.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.