game-menu

Contains native fragment links, typically in a nav. Optional data-key attributes on links map KeyboardEvent.key values to actions while a link in that menu has focus. Modified clicks and nested menus keep their native ownership.

Examples

Menu actions

Follow the links normally. With scripting enabled and a link focused, press 1 or 2 to choose a channel and see the emitted event.

Menu actions HTML

<game-menu>
	<nav aria-label="Radio channels">
		<a href="#demo-weather" data-key="1">Weather</a>
		<a href="#demo-signal" data-key="2">Signal</a>
	</nav>
</game-menu>
<p id="demo-weather" tabindex="-1">Weather channel</p>
<p id="demo-signal" tabindex="-1">Signal channel</p>

Weather channel

Signal channel

Link to a full game

A menu can also contain ordinary page links.

Link to a full game HTML

<game-menu>
	<nav aria-label="Game launch">
		<a href="/games/aether-wing/">Open the full game</a>
		<a href="/games/">Browse games</a>
	</nav>
</game-menu>

API

Attributes

None.

Emitted events
Name	Type or default	Behavior
`game-action`	`CustomEvent<{ scene: string }>`	Dispatched from the chosen link before fragment navigation. Bubbles, is composed and is cancelable. The detail contains the fragment text without #, including any percent-encoding.

Listened-for events

None.

CSS custom properties

None.

Markup hooks
Name	Type or default	Behavior
`data-key`		On a descendant fragment link, adds a shortcut while focus is inside the menu. Use the KeyboardEvent.key value.

View the Game Kit manifest