Menu v0.2.0+ HelixUI v0.2.0 or later required

Basic Menu

Actions Action 1 Action 2 Action 3 
<hx-disclosure class="hxBtn" aria-controls="basicMenuId">
  <hx-icon type="cog"></hx-icon>
  <span>Actions</span>
  <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
</hx-disclosure>
<hx-menu id="basicMenuId">
  <hx-menuitem>Action 1</hx-menuitem>
  <hx-menuitem>Action 2</hx-menuitem>
  <hx-menuitem>Action 3</hx-menuitem>
</hx-menu>

Cog Menu

Action 1 Action 2 Action 3 
<hx-disclosure class="hxBtn hxCog" aria-controls="cogMenuId">
  <hx-icon type="cog"></hx-icon>
</hx-disclosure>
<hx-menu id="cogMenuId">
  <hx-menuitem>Action 1</hx-menuitem>
  <hx-menuitem>Action 2</hx-menuitem>
  <hx-menuitem>Action 3</hx-menuitem>
</hx-menu>

Grouped Menu

Actions
TITLE
Action 1 Action 2 Action 3
TITLE
Action 1 Action 2 Action 3 
<hx-disclosure class="hxBtn" aria-controls="groupedMenuId">
  <hx-icon type="cog"></hx-icon>
  <span>Actions</span>
  <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
</hx-disclosure>
<hx-menu id="groupedMenuId">
  <section>
    <header>TITLE</header>
    <hx-menuitem>Action 1</hx-menuitem>
    <hx-menuitem>Action 2</hx-menuitem>
    <hx-menuitem>Action 3</hx-menuitem>
  </section>
  <section>
    <header>TITLE</header>
    <hx-menuitem>Action 1</hx-menuitem>
    <hx-menuitem>Action 2</hx-menuitem>
    <hx-menuitem>Action 3</hx-menuitem>
  </section>
</hx-menu>

Split Menu

Action 1 Action 2 Action 3 
<div class="hxBtnGroup hxPrimary" id="split-group">
  <button class="hxBtn">Split Menu</button>
  <hx-disclosure class="hxBtn" aria-controls="splitMenuId">
    <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
  </hx-disclosure>
</div>
<hx-menu id="splitMenuId" relative-to="split-group">
  <hx-menuitem>Action 1</hx-menuitem>
  <hx-menuitem>Action 2</hx-menuitem>
  <hx-menuitem>Action 3</hx-menuitem>
</hx-menu>

See Also