Menu Item

A <role-menu-item> is intended to be a child of <role-menu>. See /components/role-menu for more info!

Examples

API Reference

Imports

Script

HTML

<!-- Auto registers as <role-menu-item> -->
<script type="module" src="https://cdn.jsdelivr.net/npm/role-components/exports/components/menu-item/menu-item-register.js"></script>

CDN

HTML

<script type="module">
  // Auto registers as <role-menu-item>
  import "https://cdn.jsdelivr.net/npm/role-components/exports/components/menu-item/menu-item-register.js"

  // Manual Register
  import RoleMenuItem from "https://cdn.jsdelivr.net/npm/role-components/exports/components/menu-item/menu-item.js"
  RoleMenuItem.define()
  // => Registers as <role-menu-item>
</script>

Bundler

JavaScript

// Auto registers as <role-menu-item>
import "role-components/exports/components/menu-item/menu-item-register.js"

// Manual Register
import RoleMenuItem "role-components/exports/components/menu-item/menu-item.js"
RoleMenuItem.define()
// => Registers as <role-menu-item>

Slots

Name	Description
	The default slot is for the text content.
`submenu`	Slot a `<role-menu>` here and additional menu items.

Events

Name	Description
`role-menu-item-selected`	Fires when a menu item is selected and will close the menu. Called `event.preventDefault()` to stop this behavior.

Functions

Name	Description	Parameters
`handleClick()`	-	-
`handleKeydown()`	-	`e: KeyboardEvent`
`handlePointerLeave()`	-	`e: Event`
`handlePointerOver()`	-	`e: Event`
`getOrAssignId()`	Assign a random UUID with a prefix if no id is found. Will return the “id” of the element if its already assigned.	`prefix: string, force: boolean`
`getTextDirection()`	-	-
`debounce()`	-	`callback: (...args: any[]) => any, options: { key: any, wait: number }`
`setAria()`	-	`key: T, value: ARIAMixin[T]`

Parts

Name	Description
`base`	The base wrapper around the default slot and submenu slot.

Option