Menu
Provides quick context menus when you tap the trigger element.
import { menu } from '@brainandbones/skeleton';// Included in 'all.css' and 'elements.css'
import '@brainandbones/skeleton/styles/elements/menus.css';Examples
This menu uses default settings. The position will auto-update depending on the trigger's page location.
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
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 card-body" 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.
<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.
<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>Data Attributes
| Name | Description |
|---|---|
data-menu="{menuId}" | Provide a unique identifier for the menu element. This pairs with menu action param. |
Action Params
| Key | Type | Required | Description |
|---|---|---|---|
| menu | string | ✓ | Accepts the matching menu ID specified in the data attribute. |
| fixed | boolean | - | When enabled, a fixed origin position can be specified via a menu class. |
| interactive | boolean | - | When enabled, keeps the menu open while interacting with the contents. |
Classes
| Class | Description |
|---|---|
.menu-tl | Specifies a fixed origin position of top-left. |
.menu-tr | Specifies a fixed origin position of top-right. |
.menu-bl | Specifies a fixed origin position of bottom-left. |
.menu-br | Specifies a fixed origin position of bottom-right. |
Accessibility
The attribute role="menu" will be applied to the menu automatically. However, please review the
menus guidelines for handling menu bars or menu items.
Keyboard Interactions
| Keys | Description |
|---|---|
| Enter | When menu button in focus, toggles the menu open/close. |
| Space | When menu button in focus, toggles the menu open/close. |
| Esc | Close the open menu. |