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