View Source Turboprop.Hooks.Menu (Turboprop v0.1.3)
Provides a robust, accessible dropdown and context menu system. This module serves as a wrapper around Zag's Menu state machine, designed for displaying a list of actions or options to the user within a web application.
Required Components:
menu
: The main container for the menu.menu_trigger
: Activates the dropdown or context menu.menu_positioner
: Controls the menu's position in the viewport.menu_content
: Contains the clickable menu items.menu_item
: Represents an individual action or option within the menu.
Optional Components:
menu_item_group
: Groups related items within the menu.menu_item_group_label
: Provides a label for item groups, enhancing accessibility.menu_separator
: Visually separates items or groups within the menu.
Example
<div {menu()}>
<button
class="rounded-md bg-blue-500 px-3 py-1.5 text-sm text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
{menu_trigger()}
>
Menu
</button>
<div {menu_positioner()}>
<div
class="z-10 w-48 text-sm origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
{menu_content()}
>
<.link navigate="/dashboard" class="block px-4 py-2 outline-0 data-[highlighted]:bg-gray-100" {menu_item()}>
Dashboard
</.link>
<hr {menu_separator()} />
<span data-for="account" class="block px-4 py-2 text-gray-500" {menu_item_group_label()}>Account</span>
<div name="account" {menu_item_group()}>
<.link navigate="/signup" class="block px-4 py-2 outline-0 data-[highlighted]:bg-gray-100" {menu_item()}>
Sign up
</.link>
<.link navigate="/login" class="block px-4 py-2 outline-0 data-[highlighted]:bg-gray-100" {menu_item()}>
Login
</.link>
</div>
</div>
</div>
</div>
Summary
Functions
Wrapper element for menus.
Wrapper around menu items.
Menu item.
Element to group multiple menu items together.
Label for a menu group.
Element to position a menu in the viewport.
Element to separate menu items.
Button to open a menu.