Menu Item

Displays an option in a menu

Usage

The Menuitem component is intended to be used as a child of the Menu component. It does nothing on its own.

Refer to the Menu component for usage examples.

Props

option optional

• Type: { as: "checkbox" | "radio", id: string, name: string, nativeValue: any }
• Default: undefined

The option to render the menu item as, e.g. checkbox, radio.

Customization

Refer to the Menu component for customization instructions.

Examples

Refer to the Menu component for more examples.

Attaching shortcut mnemonics, icons to menu items

• File
  • 

  ---

  • 
  • 

  ---
• Edit
• View
• Run
• Help

<template>
  <winui-menubar class="can-hover">
    <winui-menuitem>
      File
      <winui-menu>
        <winui-menuitem>
          <img
            src="https://img.icons8.com/color/18/opened-folder.png"
            alt="open"
          />
          <button>
            Open...
            <span>Ctrl+O</span>
          </button>
        </winui-menuitem>
        <winui-menuitem><button>Open Recent</button></winui-menuitem>
        <hr />
        <winui-menuitem>
          <img src="https://img.icons8.com/color/18/save.png" alt="save" />
          <button>
            Save
            <span>Ctrl+S</span>
          </button>
        </winui-menuitem>
        <winui-menuitem>
          <img
            src="https://img.icons8.com/color/18/save-as.png"
            alt="save as"
          />
          <button>
            Save As...
            <span>Ctrl+Shift+S</span>
          </button>
        </winui-menuitem>
        <hr />
        <winui-menuitem><button>Exit</button></winui-menuitem>
      </winui-menu>
    </winui-menuitem>
    <winui-menuitem>Edit</winui-menuitem>
    <winui-menuitem>View</winui-menuitem>
    <winui-menuitem>Run</winui-menuitem>
    <winui-menuitem>Help</winui-menuitem>
  </winui-menubar>
</template>

Using option

• Large icons
• Medium icons
• Small icons

---

• Auto arrange icons
• Align icons to grid

<template>
  <winui-menu>
    <winui-menuitem :option="radio('lg')" v-model="radioSelected">
      Large icons
    </winui-menuitem>
    <winui-menuitem :option="radio('md')" v-model="radioSelected">
      Medium icons
    </winui-menuitem>
    <winui-menuitem :option="radio('sm')" v-model="radioSelected">
      Small icons
    </winui-menuitem>
    <hr />
    <winui-menuitem :option="check('arrange')">
      Auto arrange icons
    </winui-menuitem>
    <winui-menuitem :option="check('align')" value="true">
      Align icons to grid
    </winui-menuitem>
  </winui-menu>
</template>

<script>
export default {
  data() {
    return {
      check: (id) => ({ as: "checkbox", id: id + "-icons" }),
      radio: (size) => ({
        as: "radio",
        id: "icon-size-" + size,
        name: "icon-size",
        nativeValue: size,
      }),
      radioSelected: "md",
    };
  },
};
</script>

<style lang="stylus" scoped>
.winui-menu {
  width: 200px;
}
</style>