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.

Functions