Toggle Menu

info

For more details about Vuetify’s usage of ToggleMenu component, click ToggleMenu page.
For more prop explanations, click Vuetify ToggleMenu API page.

Props

Attribute	Description	Type	Default
attack	The designated model value for the component.	any	false
value	Specifies the vmodel value of the menu. whether the menu is open or closed.	boolean	false
class	prop that determines the class to add to the menu.	string	undefined
dark	Applies dark theme.	boolean	false
closeOnContentClick	Designates if menu should close when its content is clicked.	boolean	false
eager	Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.	boolean	true
minWidth	Sets the minimum width for the content.	number | string	undefined
nudgeLeft	Nudge the content to the bottom.	number | string	0
nudgeRight	Nudge the content to the right.	number | string	0
nudgeTop	Nudge the content to the top.	number | string	0
nudgebottom	Nudge the content to the bottom.	number | string	0
offsetX	Offset the menu on the x-axis. Works in conjunction with direction left/right.	boolean	false
offsetY	Offset the menu on the y-axis. Works in conjunction with direction top/bottom.	boolean	false
openOnClick	Designates whether menu should open on activator click.	boolean	true
openOnHover	Designates whether menu should open on activator hover.	boolean	true
openOnFocus		boolean	false
returnValue	The value that is updated when the menu is closed - must be primitive. Dot notation is supported.	any	undefined
tabindex	It determines the order of switching from one component to another with the tab key.	string	undefined
transition	Sets the component transition. Can be one of the built in transitions or one your own.	boolean | string	menu-transition
visible	Visibility of ToggleMenu component.	boolean	true

Slots

Attribute	Description
activator	When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation { attrs: { role: string, aria-haspopup: boolean, aria-expanded: string }, on: { [eventName]: eventHandler }, value: boolean }
default	The default component slot

Events

Attribute	Description
input	The updated bound model

Samples Component

Samples Qjson

Menu
Menu_PopoverInTable
Menu_sample