Menus
Menu
This component is used to display content or options in a floating panel.
Explorer
example.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12
example.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12
tailwind.config
1 2 3 4 5 6 7 8 9 10 11 12 13 14
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
example.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173
example.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
tailwind.config
1 2 3 4 5 6 7 8 9 10 11 12 13 14
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
example.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173
example.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
tailwind.config
1 2 3 4 5 6 7 8 9 10 11 12 13 14
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
example.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
example.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
tailwind.config
1 2 3 4 5 6 7 8 9 10 11 12 13 14
example.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
example.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
tailwind.config
1 2 3 4 5 6 7 8 9 10 11 12 13 14
example.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
API Reference
Section titled API ReferenceRoot
Section titled RootHTMLAttributes 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;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><Menu.Root>
<Menu.Button></Menu.Button>
<Menu.Content placement="top end"></Menu.Content>
</Menu.Root>Props
Section titled Props| Prop | Type | Default |
|---|---|---|
| boolean | false |
| ReactNode | null |
| number | 0 |
Callbacks
Section titled Callbacks| Callback | Type |
|---|---|
| function |
| function |
Instance
Section titled Instanceimport { Menu, type MenuInstance } from "@vidstack/react"
const ref = useRef<MenuInstance>(null);
useEffect(() => { /* Use props/methods here. */ }, [])
<Menu.Root ref={ref}>import { Menu, type MenuInstance } from "@vidstack/react"
const ref = useRef<MenuInstance>(null);
useEffect(() => { /* Use props/methods here. */ }, [])
<Menu.Root ref={ref}>| Prop | Type |
|---|---|
| HTMLElement |
| boolean |
| HTMLElement |
| method |
| method |
Data Attributes
Section titled Data Attributes| Name | Description |
|---|---|
| Whether menu is open. |
| Whether the menu is opened via keyboard. |
| Whether menu is a submenu. |
| Whether menu is disabled. |
| Whether the menu is resizing. |
Button
Section titled ButtonHTMLAttributes<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;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><Menu.Root>
<Menu.Button></Menu.Button>
<Menu.Content placement="top end"></Menu.Content>
</Menu.Root>Props
Section titled Props| Prop | Type | Default |
|---|---|---|
| boolean | false |
| ReactNode | null |
| boolean | false |
Callbacks
Section titled Callbacks| Callback | Type |
|---|---|
| function |
Data Attributes
Section titled Data Attributes| Name | Description |
|---|---|
| Whether menu is currently open. |
| Whether button is being keyboard focused. |
| Whether button is being keyboard focused or hovered over. |
Portal
Section titled PortalHTMLAttributes Ref<HTMLElement> Portals menu items into the document body.
import { Menu } from "@vidstack/react";
const Component = Menu.Portal;
type Props = Menu.PortalProps;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><Menu.Root>
<Menu.Button></Menu.Button>
<Menu.Portal>
<Menu.Content placement="top end"></Menu.Content>
</Menu.Portal>
</Menu.Root>Props
Section titled Props| Prop | Type | Default |
|---|---|---|
| boolean | false |
| ReactNode | null |
Items
Section titled ItemsHTMLAttributes 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;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><Menu.Root>
<Menu.Button></Menu.Button>
<Menu.Items placement="top end"></Menu.Items>
</Menu.Root>Props
Section titled Props| Prop | Type | Default |
|---|---|---|
| boolean | false |
| ReactNode | null |
| number | 0 |
| number | 0 |
| MenuPlacement | null |
Data Attributes
Section titled Data Attributes| Name | Description |
|---|---|
| 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. |
Item
Section titled ItemHTMLAttributes 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;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><Menu.Root>
<Menu.Button></Menu.Button>
<Menu.Content placement="top end">
<Menu.Item></Menu.Item>
</Menu.Content>
</Menu.Root>Props
Section titled Props| Prop | Type | Default |
|---|---|---|
| boolean | false |
| ReactNode | null |
| boolean | false |
Callbacks
Section titled Callbacks| Callback | Type |
|---|---|
| function |
RadioGroup
Section titled RadioGroupHTMLAttributes 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;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><RadioGroup.Root>
<RadioGroup.Item value="1080">1080p</RadioGroup.Item>
<RadioGroup.Item value="720">720p</RadioGroup.Item>
</RadioGroup.Root>Props
Section titled Props| Prop | Type | Default |
|---|---|---|
| boolean | false |
| ReactNode | null |
| string | '' |
Callbacks
Section titled Callbacks| Callback | Type |
|---|---|
| function |
Instance
Section titled Instanceimport { Menu, type RadioGroupInstance } from "@vidstack/react"
const ref = useRef<RadioGroupInstance>(null);
useEffect(() => { /* Use props/methods here. */ }, [])
<Menu.RadioGroup ref={ref}>import { Menu, type RadioGroupInstance } from "@vidstack/react"
const ref = useRef<RadioGroupInstance>(null);
useEffect(() => { /* Use props/methods here. */ }, [])
<Menu.RadioGroup ref={ref}>| Prop | Type |
|---|---|
| string[] |
Radio
Section titled RadioHTMLAttributes 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;import { Menu } from "@vidstack/react";
const Component = Menu.Radio;
type Props = Menu.RadioProps;<RadioGroup.Item value="1080">1080p</RadioGroup.Item><RadioGroup.Item value="1080">1080p</RadioGroup.Item>Props
Section titled Props| Prop | Type | Default |
|---|---|---|
| boolean | false |
| ReactNode | null |
| string | '' |
Callbacks
Section titled Callbacks| Callback | Type |
|---|---|
| function |
| function |
Data Attributes
Section titled Data Attributes| Name | Description |
|---|---|
| Whether radio is checked. |
| Whether radio is being keyboard focused. |
| Whether radio is being keyboard focused or hovered over. |
Next