View Source Turboprop.Hooks.Menu (Turboprop v0.1.1)
An accessible dropdown and context menu that is used to display a list of actions or options that a user can choose.
Wrapper around Zag's Menu state machine.
Required parts
menu
- Root element owning the hook.menu_trigger
- Element opening the hook.menu_positioner
- Element positioning the element in the viewport.menu_content
- Wrapper element around the items.menu_item
- Selectable item in the menu.
Optional parts
menu_item_group
- Wrapper around a group of items.menu_item_group_label
- Label for a group of items.menu_separator
- Separator between two groups of items.
Item Groups
When grouping items, groups can be labeled. To give the group element label, it requires a name
attribute with the corresponding label
having a data-for
attribute set. The example below shows this.
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>