---
url: "https://vueda.dev/v3/reference/theming/keys/ResponsiveMenu.md"
title: "ResponsiveMenu"
---

# ResponsiveMenu

Source: `client/lib/theme/vueda-tailwind/display/index.js`

> Full-screen mobile dialog surface with a fixed header row and a bounded body row.

Vue component: [ResponsiveMenu](/v3/reference/api/vue/ResponsiveMenu.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [dialog](/v3/reference/theming/keys/ResponsiveMenu.md#theme-key-ResponsiveMenu-dialog) | `grid-rows-[auto_minmax(0,1fr)] overflow-hidden` | Full-screen mobile dialog surface with a fixed header row and a bounded body row. |
| [dialogHeader](/v3/reference/theming/keys/ResponsiveMenu.md#theme-key-ResponsiveMenu-dialogHeader) | `border-b-hairline px-4 py-4 pr-12` | Visible mobile dialog header; right padding leaves room for the built-in close control. |
| [dialogBody](/v3/reference/theming/keys/ResponsiveMenu.md#theme-key-ResponsiveMenu-dialogBody) | `min-h-0 overflow-y-auto overscroll-contain p-4` | Padded scrolling region below the fixed mobile dialog header. |

<a id="theme-key-ResponsiveMenu-dialog"></a>

## dialog

> Full-screen mobile dialog surface with a fixed header row and a bounded body row.

Default classes:

`grid-rows-[auto_minmax(0,1fr)] overflow-hidden`

Source: `client/lib/theme/vueda-tailwind/display/ResponsiveMenu.theme.js:19`

<a id="theme-key-ResponsiveMenu-dialogHeader"></a>

## dialogHeader

> Visible mobile dialog header; right padding leaves room for the built-in close control.

Default classes:

`border-b-hairline px-4 py-4 pr-12`

Source: `client/lib/theme/vueda-tailwind/display/ResponsiveMenu.theme.js:23`

<a id="theme-key-ResponsiveMenu-dialogBody"></a>

## dialogBody

> Padded scrolling region below the fixed mobile dialog header.

Default classes:

`min-h-0 overflow-y-auto overscroll-contain p-4`

Source: `client/lib/theme/vueda-tailwind/display/ResponsiveMenu.theme.js:27`