Looking for the old docs? Go here

Menus

Menu

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

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:

    
    

Submenus can be easily created by nesting menus like so:

    
    
    
    
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>
PropTypeDefault
boolean
false
ReactNode
null
number
0
CallbackType
function
function
function
function
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
/* 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.
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>
PropTypeDefault
boolean
false
ReactNode
null
boolean
false
CallbackType
function
/* 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.
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>
PropTypeDefault
boolean
false
ReactNode
null
string
null
mixed
false
/* Example. */
.component[data-foo] {}
NameDescription
Whether portal is active (determined by `disabled` prop).
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>
PropTypeDefault
boolean
false
ReactNode
null
number
0
number
0
MenuPlacement
null
/* 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.
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>
PropTypeDefault
boolean
false
ReactNode
null
boolean
false
CallbackType
function
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>
PropTypeDefault
boolean
false
ReactNode
null
string
''
CallbackType
function
import { Menu, type RadioGroupInstance } from "@vidstack/react"

const ref = useRef<RadioGroupInstance>(null);

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

<Menu.RadioGroup ref={ref}>
PropType
string[]
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>
PropTypeDefault
boolean
false
ReactNode
null
string
''
CallbackType
function
function
/* Example. */
.component[data-foo] {}
NameDescription
Whether radio is checked.
Whether radio is being keyboard focused.
Whether radio is being keyboard focused or hovered over.