Skip to content

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) and the filter add-menu (FilterMenu) 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

Props ​

NameTypeRequiredDefaultDescription
iconOverrideObjectnullA partial icon registry ({ [componentName]: { [iconName]: { component, props } } }) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants.
themeOverrideObjectnullA partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants.
iconstringnullIcon-registry key for the leading trigger glyph (e.g. "sort", "filter").
labelstring""Trigger button label.
titlestringnullMobile dialog heading; defaults to label.
triggerTargetobject|stringnullElement (or selector) the trigger teleports into. When falsy, the trigger renders in place.
triggerQastring"responsive-menu-trigger"data-qa for the trigger button.
contentQastring"responsive-menu-content"data-qa for the popover content / dialog body wrapper.

Slots ​

default ​

Slot.

Source ​

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