• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Testing
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
      • Failed to execute removeChild on Node
    • FAQ
    • Contributing
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
      • Option Group
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Examples
    1. Default
    2. Highlight
    3. Danger
    4. As link
  2. Properties
  3. Methods
    1. focusInner() => Promise<void>
  4. Shadow Parts
  5. Dependencies
    1. Depends on
    2. Graph
Components Context Menu Menuitem
(external link)

ld-menuitem #

The ld-menuitem component is a subcomponent for ld-context-menu / ld-menu and is meant to be used in the slot of either the ld-context-menu, the ld-menu or the ld-menuitem-group component.

Examples #

Default #

<ld-menu>
  <ld-menuitem>Menu item</ld-menuitem>
</ld-menu>
<ul class="ld-menu" role="menu">
  <li class="ld-menuitem"  role="menuitemradio">
    <button class="ld-menuitem__button ld-button ld-button--justify-start ld-button--ghost ld-button--neutral-ghost">
      Menu item
    </button>
  </li>
</ul>
<LdMenu>
  <LdMenuitem>Menu item</LdMenuitem>
</LdMenu>
Menu item

Highlight #

<ld-menu>
  <ld-menuitem mode="highlight">Menu item</ld-menuitem>
</ld-menu>
<ul class="ld-menu" role="menu">
  <li class="ld-menuitem"  role="menuitemradio">
    <button class="ld-menuitem__button ld-button ld-button--justify-start ld-button--ghost">
      Menu item
    </button>
  </li>
</ul>
<LdMenu>
  <LdMenuitem mode="highlight">Menu item</LdMenuitem>
</LdMenu>
Menu item

Danger #

<ld-menu>
  <ld-menuitem mode="danger">Menu item</ld-menuitem>
</ld-menu>
<ul class="ld-menu" role="menu">
  <li class="ld-menuitem"  role="menuitemradio">
    <button class="ld-menuitem__button ld-button ld-button--justify-start ld-button--ghost ld-button--danger-ghost">
      Menu item
    </button>
  </li>
</ul>
<LdMenu>
  <LdMenuitem mode="danger">Menu item</LdMenuitem>
</LdMenu>
Menu item

As link #

<ld-menu>
  <ld-menuitem href="#" target="_blank">Menu item</ld-menuitem>
</ld-menu>
<ul class="ld-menu" role="menu">
  <li class="ld-menuitem"  role="menuitemradio">
    <a class="ld-menuitem__button ld-button ld-button--justify-start ld-button--ghost ld-button--neutral-ghost" href="#" target="_blank" rel="noreferrer noopener">
      Menu item
    </a>
  </li>
</ul>
<LdMenu>
  <LdMenuitem href="#" target="_blank">Menu item</LdMenuitem>
</LdMenu>
Menu item
  • Menu item

Properties #

Property Attribute Description Type Default
disabled disabled Disabled state of the menu item. boolean undefined
href href Transforms the menu item to an anchor element. See mdn docs for more information on the href attribute. HTMLLdButtonElement undefined
key key for tracking the node's identity when working with lists string | number undefined
ldTabindex ld-tabindex Tab index of the menu item. number undefined
mode mode Display mode. "danger" | "highlight" | "neutral" 'neutral'
preventClose prevent-close Prevent closing of the context menu on click. boolean undefined
ref ref reference to component any undefined
target target The target attributed can be used in conjunction with the href attribute. See mdn docs for more information on the target attribute. HTMLLdButtonElement undefined

Methods #

focusInner() => Promise<void> #

Sets focus on the anchor or button

Returns #

Type: Promise<void>

Shadow Parts #

Part Description
"button" ld-button element wrapping the default slot
"listitem" li element wrapping the ld-button element

Dependencies #

Depends on #

  • ld-button

Graph #

graph TD;
  ld-menuitem --> ld-button
  style ld-menuitem fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS