Win7 UI

# Menu

Displays options in a hierarchical list

# Usage

The Menu component comes in two variants: Menu and MenuBar. Both are basically just wrappers that use the children Menuitem components to render the items.

<template>
  <winui-menu>
    <winui-menuitem><button>Back</button></winui-menuitem>
    <winui-menuitem><button>Forward</button></winui-menuitem>
    <winui-menuitem><button>Reload</button></winui-menuitem>
    <winui-menuitem><button>Save as...</button></winui-menuitem>
    <winui-menuitem><button>View page source</button></winui-menuitem>
    <winui-menuitem><button>Inspect</button></winui-menuitem>
  </winui-menu>
</template>

<style lang="stylus" scoped>
.winui-menu {
  width: 250px;
}
</style>
<template>
  <winui-menubar>
    <winui-menuitem>File</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>

# Props

Not available.

# Customization

  • Use the class name .winui-menu to override/customize the Menu component's styles.
  • Use the class name .winui-menubar to override/customize the Menubar component's styles.

By default, the nesting menus are only shown when the associated option is focused/clicked. To trigger it on hover, add the can-hover class to the root <winui-menu>/<winui-menubar> element.

# Examples

Refer to the Menuitem component for more examples.

# Nesting menus







 




 







 


 





 



 









<template>
  <winui-menu class="can-hover">
    <winui-menuitem><button>Option 1</button></winui-menuitem>
    <winui-menuitem><button>Option 2</button></winui-menuitem>
    <winui-menuitem>
      Option 3
      <winui-menu>
        <winui-menuitem><button>Option 3.1</button></winui-menuitem>
        <winui-menuitem><button>Option 3.2</button></winui-menuitem>
        <winui-menuitem><button>Option 3.3</button></winui-menuitem>
        <winui-menuitem><button>Option 3.4</button></winui-menuitem>
      </winui-menu>
    </winui-menuitem>
    <hr />
    <winui-menuitem><button>Option 4</button></winui-menuitem>
    <winui-menuitem><button>Option 5</button></winui-menuitem>
    <hr />
    <winui-menuitem>
      Option 6
      <winui-menu>
        <winui-menuitem>
          Option 6.1
          <winui-menu>
            <winui-menuitem><button>Option 6.1.1</button></winui-menuitem>
            <winui-menuitem><button>Option 6.1.2</button></winui-menuitem>
            <hr />
            <winui-menuitem><button>Option 6.1.3</button></winui-menuitem>
            <winui-menuitem><button>Option 6.1.4</button></winui-menuitem>
          </winui-menu>
        </winui-menuitem>
        <winui-menuitem><button>Option 6.2</button></winui-menuitem>
        <winui-menuitem><button>Option 6.3</button></winui-menuitem>
      </winui-menu>
    </winui-menuitem>
  </winui-menu>
</template>

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

← Menu Item →