Menu

Utility

Provides quick context menus when you tap the trigger element.

@skeletonlabs/skeleton
View Source
Doc Source
Accessibility Reference

Examples

This menu uses default settings. The position will auto-update depending on the trigger's page location.

This menu will not close when clicking within the menu body due to interactive: true.

This menus is fixed to the top-right origin point due to fixed: true and .menu-tl.

This menu is arbitrarily positioned in the top-right corner of the page. We've made it a bright color to catch you attention.

Usage

Usage

Menus make use of both Tailwind Element styles as well as a Svelte Action. Below is a basic example with minimal styles.

html 
<!-- Use a wrapping .relative class to confine the menu position -->
<span class="relative">

	<!-- Trigger: apply the 'use:menu' action and supply the unique menu ID -->
	<button use:menu={{ menu: 'example' }}>Trigger</button>

	<!-- Menu: set a matching 'data-menu-[menuId]' attribute -->
	<div data-menu="example">(menu)</div>
	
</span>

Menu Styles

Use .card classes to alter the appearance of the menu element.

html 
<div class="card card-body" data-menu="example">(menu)</div>

Pair this with Tailwind utility classes to customize the look and feel.

html 
<div class="card p-2 w-64 shadow-xl" data-menu="example">(menu)</div>

Combine .list-nav, and .card Tailwind Element classes to create a navigation menu.

html 
<nav class="list-nav card p-4 w-64 shadow-xl" data-menu="example">
	<ul>
		<li><a href="/">Home</a></li>
		<li><a href="/">About</a></li>
		<li><a href="/">Blog</a></li>
	</ul>
</nav>

Fixed Origin

Use fixed: true and apply the desired origin via the menu-[tl|tr|bl|br] class.

html 
<button use:menu={{ menu: 'example', fixed: true }}>Trigger</button>
html 
<div class="menu-tl hidden" data-menu="example">(menu)</div>

Interactive Menus

By default menus will self-close when clicking within the menu body. Set interactive: true to alter this behavior.

html 
<button use:menu={{ menu: 'example', interactive: true }}>Trigger</button>

Custom Positioning

Remove the wrapping .relative element, set fixed: true, and position the menu with utility classes.

html 
<button use:menu={{ menu: 'example', fixed: true }}>Trigger</button>
html 
<div class="absolute top-2 right-2" data-menu="example">(menu)</div>

Menu State Handler

You can optionally monitor the open/closed state of a menu using state: stateHandler

html 
<button use:menu={{ menu: 'example', state: stateHandler }}>Trigger</button>

In this case, stateHandler is a callback function that will update a local variable. We use the if statement to match a particular menu on the page.

ts 
let menuExample: boolean = false;

function stateHandler(response: { menu: string; state: boolean }): void {
	if (response.menu === 'example') menuExample = response.state;
}

The menu value will match your unique data-menu ID value, while state will be a boolean value representing TRUE for open and FALSE for closed.