---
url: "https://vueda.dev/v3/reference/api/vue/ResponsiveMenu.md"
title: "ResponsiveMenu"
---

# ResponsiveMenu

## Overview

Responsive menu shell for a toolbar control: a teleported trigger button
(leading icon, label, caret) that opens its slotted content as a popover on
desktop and a full-screen dialog on mobile. Shared by the sort add-menu
([SortControl](/v3/reference/api/vue/SortControl.md)) and the filter add-menu
([FilterMenu](/v3/reference/api/vue/FilterMenu.md)) so both pick their surface by viewport the
same way. Presentational: the host supplies the menu body via the default
slot and owns what the menu does; this component owns only the trigger,
open/close state, and the popover/dialog choice. `keepOpenOverNestedPopper`
is applied so a nested popper (a Select or date picker inside the body) does
not dismiss the menu.

Theme entry: [ResponsiveMenu](/v3/reference/theming/keys/ResponsiveMenu.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-iconOverride">iconOverride</span> | `Object` |  | `null` | A partial icon registry (`{ [componentName]: { [iconName]: { component, props } } }`) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants. |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-icon">icon</span> | `string` |  | `null` | Icon-registry key for the leading trigger glyph (e.g. `"sort"`, `"filter"`). |
| <span id="prop-label">label</span> | `string` |  | `""` | Trigger button label. |
| <span id="prop-title">title</span> | `string` |  | `null` | Mobile dialog heading; defaults to `label`. |
| <span id="prop-triggerTarget">triggerTarget</span> | `object\|string` |  | `null` | Element (or selector) the trigger teleports into. When falsy, the trigger renders in place. |
| <span id="prop-triggerQa">triggerQa</span> | `string` |  | `"responsive-menu-trigger"` | `data-qa` for the trigger button. |
| <span id="prop-contentQa">contentQa</span> | `string` |  | `"responsive-menu-content"` | `data-qa` for the popover content / dialog body wrapper. |

## Slots

### `default` {#slot-default}

Slot.

## Source

`client/lib/display/responsive-menu/ResponsiveMenu.vue`