<ix-menu>

This webcomponent follows the open-wc recommendation.

Installation

npm i @digital-realty/ix-menu

Usage

<script type="module">
  import '@digital-realty/ix-menu/ix-menu.js';
  import '@digital-realty/ix-menu/ix-menu-item.js';
  import '@digital-realty/ix-menu/ix-sub-menu.js';
</script>
<span style="position: relative">
  <button id="anchor">Menu anchor</button>
  <ix-menu id="menu" anchor="anchor" has-overflow>
    <ix-menu-item>
      <div slot="headline">Apple</div>
    </ix-menu-item>
    <ix-menu-item>
      <div slot="headline">Banana</div>
    </ix-menu-item>
    <ix-sub-menu 
      menu-corner="end-end"
      anchor-corner="end-start">
      <ix-menu-item slot="item">
        <div slot="headline">Fruits A</div>
      </ix-menu-item>
      <!-- Submenu must be slotted into sub-menu's menu slot -->
      <ix-menu slot="menu">
        <ix-menu-item>
          <div slot="headline">Apricot</div>
        </ix-menu-item>
        <ix-menu-item>
          <div slot="headline">Avocado</div>
        </ix-menu-item>
      </ix-menu>
    </ix-sub-menu>
  </ix-menu>
</span>
<script>
    const anchorEl = document.body.querySelector('#anchor');
    const menuEl = document.body.querySelector('#menu');
    anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; });
</script>

With menu anchor wrapper

<script type="module">
  import '@digital-realty/ix-menu/ix-menu-anchor.js';
  import '@digital-realty/ix-menu/ix-menu.js';
  import '@digital-realty/ix-menu/ix-menu-item.js';
  import '@digital-realty/ix-menu/ix-sub-menu.js';
</script>
<ix-menu-anchor>
  <button slot="anchor">The menu item</button>
  <ix-menu-item>
    <div slot="headline">Apple</div>
  </ix-menu-item>
  <ix-menu-item>
    <div slot="headline">Banana</div>
  </ix-menu-item>
  <ix-sub-menu 
    menu-corner="end-end"
    anchor-corner="end-start">
    <ix-menu-item slot="item">
      <div slot="headline">Fruits A</div>
    </ix-menu-item>
    <!-- Submenu must be slotted into sub-menu's menu slot -->
    <ix-menu slot="menu">
      <ix-menu-item>
        <div slot="headline">Apricot</div>
      </ix-menu-item>
      <ix-menu-item>
        <div slot="headline">Avocado</div>
      </ix-menu-item>
    </ix-menu>
  </ix-sub-menu>
</ix-menu-anchor> 

In React

<script type="module">
  import { IxMenu } from '@digital-realty/ix-menu/IxMenu';
  import { IxMenuIem } from '@digital-realty/ix-menu/IxMenuItem';
  import { IxSubMenu } from '@digital-realty/ix-menu/IxSubMenu';
<script>

Demo and Documentation

Full documentation and demo are available at DLR Component Gallery.