---
Title: Setting Menus
Type: Document
---

import {Prism} from "@astrojs/prism"
import {Zorn} from "@minpluto/zorn"

<video title="Settings Menu in action on MinPluto" controls autoplay muted loop src="https://md.sudovanilla.org/videos/webm/Screencast%20from%202024-07-31%2000-44-01.webm"></video>

If you want to add additional settings to the player, you can enable the Settings button and add your own menu and sub-menus.

To enable the menu, add the `SettingsMenu` option:
<Prism lang="jsx" code={`<Zorn SettingsMenu/>`}/>

Then, as a slot, add your menu like so:
<Prism lang="jsx" code={`
<Zorn SettingsMenu>
	<slot slot="menu">
		<button>Stats for Geeks</button>
		<hr/>
		<button>Open Video URL <ArrowUpRight/></button>
		<button>Download <ArrowUpRight/></button>
		<button>Embed <ArrowUpRight/></button>
		<hr/>
		<button id="has-switch">Milieu <SwitchOn/></button>
		<button>Close Captions <NavArrowRight/></button>
	</slot>
</Zorn>
`}/>

Remember to add it as a slot with the slot name of `menu`.

> Use `OpenZornMenu()` as the open menu function. You can use the scripts provided in `/test/` of this package.

You can also add sub-menus with additional scripts you'll need to add:
<Prism lang="jsx" code={`
<Zorn SettingsMenu>
	<slot slot="menu">
		<button>Stats for Geeks</button>
		<hr/>
		<button>Open Video URL <ArrowUpRight/></button>
		<button>Download <ArrowUpRight/></button>
		<button>Embed <ArrowUpRight/></button>
		<hr/>
		<button id="has-switch">Milieu <SwitchOn/></button>
		<button>Close Captions <NavArrowRight/></button>
	</slot>
	<slot slot="extra-menus">
		<div id="quality-changer" class="vc-menu">
			<button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><NavArrowLeft/> Back</span></button>
			<button>1080p</button>
			<button>720p</button>
			<button>360p</button>
		</div>
	</slot>
</Zorn>

<script is:inline>
    function PlayerMenu_HideAll() {
        document.querySelector('.vc-menu#settings').style.display = 'none'
        document.querySelector('.vc-menu#quality-changer').style.display = 'none'
		document.querySelector('#open-zorn-settings-button').setAttribute('onclick', 'OpenZornMenu()')
    }
    function OpenZornMenu() {
        PlayerMenu_HideAll()
        document.querySelector('.vc-menu#settings').style.display = 'flex'
		document.querySelector('#open-zorn-settings-button').setAttribute('onclick', 'PlayerMenu_HideAll()')
    }
    function PlayerMenu_Quality() {
        PlayerMenu_HideAll()
        document.querySelector('.vc-menu#quality-changer').style.display = 'flex'
    }
</script>
`}/>

Remember to add it as a slot with the slot name of `extra-menus`.