Guillotine.Menu (guillotine v0.3.0)

Menus offer an easy way to build custom, accessible dropdown components with robust support for keyboard navigation.

Example

<.menu>
  <.menu_trigger 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
  </.menu_trigger>
  <.menu_positioner>
    <.menu_content 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_item as={&Phoenix.Component.link/1} navigate="/link" class="block px-4 py-2 outline-0 data-[highlighted]:bg-gray-100">
        Phoenix Link
      </.menu_item>
      <.menu_item as="a" href="/anchor" class="block px-4 py-2 outline-0 data-[highlighted]:bg-gray-100">
        Anchor
      </.menu_item>
    </.menu_content>
  </.menu_positioner>
</.menu>

Summary

Functions

Attributes

  • id (:string) - ID.
  • as (:any) - Tag or component to render as. Defaults to "div".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block

Attributes

  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block

Attributes

  • id (:string) - ID.
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block

Attributes

  • id (:string) - ID.
  • as (:any) - Tag or component to render as. Defaults to "a".
  • Global attributes are accepted. Additional attributes. Supports all globals plus: ["href"].

Slots

  • inner_block

Attributes

  • for (:string) (required) - Group the label belongs to.
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block

Attributes

  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block

Attributes

  • as (:any) - Tag or component to render as. Defaults to "hr".
  • Global attributes are accepted. Additional attributes. Supports all globals plus: ["href"].

Attributes

  • as (:any) - Tag or component to render as. Defaults to "button".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block

Functions