Looking for the old docs? Go here

Menus

Menu

This component is used to display content or options in a floating panel.

Height Transition

Section titled Height Transition

The --menu-height CSS variable is exposed to enable creating smooth height transitions. The data-transition="height" attribute will be present when the transition is active:
Section titled Submenus

Submenus can be easily created by nesting menus like so:

API Reference

Section titled API Reference
Section titled Root
HTMLAttributes
Ref<MenuInstance>

Root menu container used to hold and manage a menu button and menu items. This component is used to display options in a floating panel. They can be nested to create submenus.

import { Menu } from "@vidstack/react";

const Component = Menu.Root;
type Props = Menu.RootProps;
<Menu.Root>
  <Menu.Button></Menu.Button>
  <Menu.Content placement="top end"></Menu.Content>
</Menu.Root>
Section titled Props
PropTypeDefault
boolean
false
ReactNode
null
number
0
Section titled Callbacks
CallbackType
function
function
function
function
Section titled Instance
import { Menu, type MenuInstance } from "@vidstack/react"

const ref = useRef<MenuInstance>(null);

useEffect(() => { /* Use props/methods here. */ }, [])

<Menu.Root ref={ref}>
PropType
HTMLElement
boolean
HTMLElement
method
method
Section titled Data Attributes
/* Example. */
.component[data-foo] {}
NameDescription
Whether this is the root menu items.
Whether menu is a submenu.
Whether menu is open.
Whether the menu is opened via keyboard.
Whether menu is disabled.
Section titled Button
HTMLAttributes<HTMLButtonElement>
Ref<HTMLButtonElement>

A button that controls the opening and closing of a menu component. The button will become a menuitem when used inside a submenu.

import { Menu } from "@vidstack/react";

const Component = Menu.Button;
type Props = Menu.ButtonProps;
<Menu.Root>
  <Menu.Button></Menu.Button>
  <Menu.Content placement="top end"></Menu.Content>
</Menu.Root>
Section titled Props
PropTypeDefault
boolean
false
ReactNode
null
boolean
false
Section titled Callbacks
CallbackType
function
Section titled Data Attributes
/* Example. */
.component[data-foo] {}
NameDescription
Whether this is the root menu button.
Whether menu button is part of a submenu.
Whether menu is currently open.
Whether button is being keyboard focused.
Whether button is being keyboard focused or hovered over.
Section titled Portal
HTMLAttributes
Ref<HTMLElement>

Portals menu items into the given container.

import { Menu } from "@vidstack/react";

const Component = Menu.Portal;
type Props = Menu.PortalProps;
<Menu.Root>
  <Menu.Button></Menu.Button>
  <Menu.Portal>
    <Menu.Content placement="top end"></Menu.Content>
  </Menu.Portal>
</Menu.Root>
Section titled Props
PropTypeDefault
boolean
false
ReactNode
null
string
null
mixed
false
Section titled Data Attributes
/* Example. */
.component[data-foo] {}
NameDescription
Whether portal is active (determined by `disabled` prop).
Section titled Items
HTMLAttributes
Ref<HTMLElement>

Used to group and display settings or arbitrary content in a floating panel.

import { Menu } from "@vidstack/react";

const Component = Menu.Items;
type Props = Menu.ItemsProps;
<Menu.Root>
  <Menu.Button></Menu.Button>
  <Menu.Items placement="top end"></Menu.Items>
</Menu.Root>
Section titled Props
PropTypeDefault
boolean
false
ReactNode
null
number
0
number
0
MenuPlacement
null
Section titled Data Attributes
/* Example. */
.component[data-foo] {}
NameDescription
Whether this is the root menu items.
Whether menu items are part of a submenu.
Whether menu items are currently visible.
Whether the menu is opened via keyboard.
The placement prop setting.
Whether item are being keyboard focused.
Whether items are being keyboard focused or hovered over.
Whether the menu is resizing.
Section titled Item
HTMLAttributes
Ref<HTMLElement>

Represents a specific option or action, typically displayed as a text label or icon, which users can select to access or perform a particular function or view related content.

import { Menu } from "@vidstack/react";

const Component = Menu.Item;
type Props = Menu.ItemProps;
<Menu.Root>
  <Menu.Button></Menu.Button>
  <Menu.Content placement="top end">
    <Menu.Item></Menu.Item>
  </Menu.Content>
</Menu.Root>
Section titled Props
PropTypeDefault
boolean
false
ReactNode
null
boolean
false
Section titled Callbacks
CallbackType
function
Section titled RadioGroup
HTMLAttributes
Ref<RadioGroupInstance>

A radio group consists of options where only one of them can be checked. Each option is provided as a radio (i.e., a selectable element).

import { Menu } from "@vidstack/react";

const Component = Menu.RadioGroup;
type Props = Menu.RadioGroupProps;
<RadioGroup.Root>
  <RadioGroup.Item value="1080">1080p</RadioGroup.Item>
  <RadioGroup.Item value="720">720p</RadioGroup.Item>
</RadioGroup.Root>
Section titled Props
PropTypeDefault
boolean
false
ReactNode
null
string
''
Section titled Callbacks
CallbackType
function
Section titled Instance
import { Menu, type RadioGroupInstance } from "@vidstack/react"

const ref = useRef<RadioGroupInstance>(null);

useEffect(() => { /* Use props/methods here. */ }, [])

<Menu.RadioGroup ref={ref}>
PropType
string[]
Section titled Radio
HTMLAttributes
Ref<HTMLElement>

A radio represents a option that a user can select inside of a radio group. Only one radio can be checked in a group.

import { Menu } from "@vidstack/react";

const Component = Menu.Radio;
type Props = Menu.RadioProps;
<RadioGroup.Item value="1080">1080p</RadioGroup.Item>
Section titled Props
PropTypeDefault
boolean
false
ReactNode
null
string
''
Section titled Callbacks
CallbackType
function
function
Section titled Data Attributes
/* Example. */
.component[data-foo] {}
NameDescription
Whether radio is checked.
Whether radio is being keyboard focused.
Whether radio is being keyboard focused or hovered over.
Next
Radio Group