Menu

Usage

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

<!-- 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.

<div class="card p-4" data-menu="example">(menu)</div>

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

<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.

When .list-nav is applied, links will be styled automatically. To apply the same styles to other elements, such as buttons, use the .option Tailwind Elements class, along with any other desired Tailwind utility classes.

<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>
        <li><button class="option w-full">Logout</button></li>
	</ul>
</nav>

Fixed Origin

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

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

<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.

<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.

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

<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

<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.

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.