docs(site): add menu reference

[sampotts]

Closes #1672

Summary

Add the missing Menu component reference page and focused demos for React and HTML. This also updates the playback-rate and captions button references so their menu-trigger behavior matches the current Menu API.

Changes

• Add Menu anatomy, behavior, styling, accessibility, examples, and generated component reference tables.
• Add React and HTML settings-menu demos covering playback-rate and captions submenu triggers.
• Document menuTrigger behavior on captions and playback-rate buttons.

Testing

• pnpm -F site api-docs
• pnpm -F site build

---

Note

Low Risk
Documentation and demo-only changes with no runtime library or security impact.

Overview
Adds a Menu component reference page and registers it in the docs sidebar, including anatomy, behavior, styling, accessibility, generated API tables, and a Basic usage example.

New React and HTML/CSS demos show a video player Settings menu with nested playback rate and captions submenus (radio groups, back navigation, animated panels) plus a Copy link action.

CaptionsButton and PlaybackRateButton references now document menuTrigger: when enabled, activation opens the linked menu instead of toggling/cycling, including React auto-enabling for captions inside Menu.Trigger.

^{Reviewed by Cursor Bugbot for commit d57eba1. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Jun 10, 2026 6:40am

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html — no changes

Presets (7)

Entry	Size
/video (default)	41.65 kB
/video (default + hls)	175.29 kB
/video (minimal)	41.35 kB
/video (minimal + hls)	174.84 kB
/audio (default)	35.52 kB
/audio (minimal)	32.78 kB
/background	4.22 kB

Media (9)

Entry	Size
/media/background-video	1.06 kB
/media/container	1.72 kB
/media/dash-video	236.69 kB
/media/hls-video	134.98 kB
/media/mux-audio	160.96 kB
/media/mux-video	160.95 kB
/media/native-hls-video	4.63 kB
/media/simple-hls-audio-only	15.19 kB
/media/simple-hls-video	16.96 kB

Players (5)

Entry	Size
/video/player	7.43 kB
/audio/player	5.30 kB
/background/player	3.92 kB
/live-video/player	7.45 kB
/live-audio/player	5.32 kB

Skins (30)

Entry	Type	Size
/video/minimal-skin.css	css	5.23 kB
/video/skin.css	css	5.19 kB
/video/minimal-skin	js	41.34 kB
/video/minimal-skin.tailwind	js	41.79 kB
/video/skin	js	41.64 kB
/video/skin.tailwind	js	42.08 kB
/audio/minimal-skin.css	css	3.45 kB
/audio/skin.css	css	3.36 kB
/audio/minimal-skin	js	32.76 kB
/audio/minimal-skin.tailwind	js	33.12 kB
/audio/skin	js	35.58 kB
/audio/skin.tailwind	js	35.86 kB
/background/skin.css	css	133 B
/background/skin	js	1.16 kB
/live-video/minimal-skin.css	css	5.23 kB
/live-video/skin.css	css	5.19 kB
/live-video/minimal-skin	js	40.75 kB
/live-video/minimal-skin.tailwind	js	41.11 kB
/live-video/skin	js	40.70 kB
/live-video/skin.tailwind	js	41.06 kB
/live-audio/minimal-skin.css	css	3.45 kB
/live-audio/skin.css	css	3.36 kB
/live-audio/minimal-skin	js	27.00 kB
/live-audio/minimal-skin.tailwind	js	26.54 kB
/live-audio/skin	js	29.51 kB
/live-audio/skin.tailwind	js	29.05 kB
/global.css	css	176 B
/shared.css	css	88 B
/tailwind.css	css	228 B
/skin-element	js	1.37 kB

UI Components (37)

Entry	Size
/ui/airplay-button	2.25 kB
/ui/alert-dialog	960 B
/ui/alert-dialog-close	525 B
/ui/alert-dialog-description	332 B
/ui/alert-dialog-title	334 B
/ui/buffering-indicator	2.16 kB
/ui/captions-button	2.22 kB
/ui/captions-radio-group	2.13 kB
/ui/cast-button	2.14 kB
/ui/compounds	5.44 kB
/ui/controls	2.12 kB
/ui/error-dialog	2.46 kB
/ui/fullscreen-button	2.20 kB
/ui/hotkey	2.73 kB
/ui/menu	3.85 kB
/ui/mute-button	2.19 kB
/ui/pip-button	2.23 kB
/ui/play-button	2.19 kB
/ui/playback-rate-button	2.29 kB
/ui/playback-rate-radio-group	2.17 kB
/ui/popover	1.59 kB
/ui/poster	1.99 kB
/ui/seek-button	2.23 kB
/ui/seek-indicator	2.65 kB
/ui/seek-indicator-value	297 B
/ui/slider	1.11 kB
/ui/status-announcer	2.49 kB
/ui/status-indicator	2.41 kB
/ui/status-indicator-value	226 B
/ui/thumbnail	2.51 kB
/ui/time	2.11 kB
/ui/time-slider	2.81 kB
/ui/tooltip	1.72 kB
/ui/volume-indicator	2.71 kB
/ui/volume-indicator-fill	322 B
/ui/volume-indicator-value	318 B
/ui/volume-slider	3.58 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes

Presets (7)

Entry	Size
/video (default)	34.56 kB
/video (default + hls)	166.96 kB
/video (minimal)	34.64 kB
/video (minimal + hls)	166.91 kB
/audio (default)	28.33 kB
/audio (minimal)	28.36 kB
/background	754 B

Media (8)

Entry	Size
/media/background-video	575 B
/media/dash-video	235.21 kB
/media/hls-video	133.61 kB
/media/mux-audio	159.74 kB
/media/mux-video	159.75 kB
/media/native-hls-video	3.13 kB
/media/simple-hls-audio-only	13.79 kB
/media/simple-hls-video	15.55 kB

Skins (27)

Entry	Type	Size
/tailwind.css	css	228 B
/video/minimal-skin.css	css	5.14 kB
/video/skin.css	css	5.10 kB
/video/minimal-skin	js	34.56 kB
/video/minimal-skin.tailwind	js	39.98 kB
/video/skin	js	34.49 kB
/video/skin.tailwind	js	39.85 kB
/audio/minimal-skin.css	css	3.32 kB
/audio/skin.css	css	3.23 kB
/audio/minimal-skin	js	28.33 kB
/audio/minimal-skin.tailwind	js	28.75 kB
/audio/skin	js	28.23 kB
/audio/skin.tailwind	js	31.82 kB
/background/skin.css	css	90 B
/background/skin	js	272 B
/live-video/minimal-skin.css	css	5.14 kB
/live-video/skin.css	css	5.10 kB
/live-video/minimal-skin	js	30.74 kB
/live-video/minimal-skin.tailwind	js	36.03 kB
/live-video/skin	js	30.77 kB
/live-video/skin.tailwind	js	36.03 kB
/live-audio/minimal-skin.css	css	3.32 kB
/live-audio/skin.css	css	3.23 kB
/live-audio/minimal-skin	js	20.84 kB
/live-audio/minimal-skin.tailwind	js	23.58 kB
/live-audio/skin	js	20.88 kB
/live-audio/skin.tailwind	js	23.68 kB

UI Components (31)

Entry	Size
/ui/airplay-button	2.23 kB
/ui/alert-dialog	1.11 kB
/ui/buffering-indicator	1.89 kB
/ui/captions-button	2.19 kB
/ui/captions-radio-group	2.05 kB
/ui/cast-button	2.12 kB
/ui/controls	1.96 kB
/ui/error-dialog	2.35 kB
/ui/fullscreen-button	2.13 kB
/ui/gesture	1.32 kB
/ui/hotkey	1.90 kB
/ui/live-button	2.08 kB
/ui/menu	5.47 kB
/ui/mute-button	2.11 kB
/ui/pip-button	2.11 kB
/ui/play-button	2.16 kB
/ui/playback-rate	2.44 kB
/ui/playback-rate-button	2.15 kB
/ui/popover	2.28 kB
/ui/poster	1.78 kB
/ui/seek-button	2.11 kB
/ui/seek-indicator	1.96 kB
/ui/slider	3.30 kB
/ui/status-announcer	1.76 kB
/ui/status-indicator	2.00 kB
/ui/thumbnail	2.13 kB
/ui/time	2.05 kB
/ui/time-slider	3.08 kB
/ui/tooltip	2.62 kB
/ui/volume-indicator	2.02 kB
/ui/volume-slider	3.12 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (10)

Entry	Size
.	7.94 kB
/dom	16.27 kB
/dom/media/custom-media-element	1.90 kB
/dom/media/dash	234.36 kB
/dom/media/google-cast	4.07 kB
/dom/media/hls	132.99 kB
/dom/media/mux	158.95 kB
/dom/media/native-hls	2.52 kB
/dom/media/simple-hls	14.89 kB
/dom/media/simple-hls-audio-only	13.14 kB

🏷️ @videojs/element — no changes

Entries (2)

Entry	Size
.	996 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Size
.	1.39 kB
/html	696 B
/react	360 B

🔧 @videojs/utils — no changes

Entries (10)

Entry	Size
/array	104 B
/dom	2.06 kB
/events	319 B
/function	327 B
/object	275 B
/predicate	265 B
/string	192 B
/style	190 B
/time	478 B
/number	158 B

📦 @videojs/spf — no changes

Entries (4)

Entry	Size
.	4.45 kB
/dom	6.31 kB
/hls	14.37 kB
/background-looping-video	12.29 kB

---

ℹ️ How to interpret

All sizes are standalone totals (minified + brotli).

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current sizes.

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	d57eba1
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/6a2906c3db1066000872d3c6
😎 Deploy Preview	https://deploy-preview-1673--vjs10-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.