Menu component

Basic usage 

import { WMenu } from "vue-windi"

Basic 

<WMenu>
  <WButton menu-item>Item 1</WButton>
  <WButton menu-item>Item 2</WButton>
  <WButton menu-item>Item 3</WButton>
</WMenu>

Hover border 

<WMenu hover-border rounded>
  <WButton menu-item>Item 1</WButton>
  <WButton menu-item>Item 2</WButton>
  <WButton menu-item>Item 3</WButton>
</WMenu>

Rounded & Padding 

<WMenu rounded padding>
  <WButton menu-item>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> </svg>
    Item 1
  </WButton>
  <WButton menu-item>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg>
    Item 2
  </WButton>
  <WButton menu-item>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> </svg>
    Item 3
  </WButton>
</WMenu>

Compact 

<WMenu compact rounded padding>
  <WButton menu-item>Item 1</WButton>
  <WButton menu-item>Item 2</WButton>
  <WButton menu-item>Item 3</WButton>
</WMenu>

Compact responsive

Compact if screen is smaller then large screen (lg).


<WMenu compact="lg" rounded padding>
  <WButton menu-item>Responsive 1</WButton>
  <WButton menu-item>Responsive 2</WButton>
  <WButton menu-item>Responsive 3</WButton>
</WMenu>

Disabled 

<WMenu rounded padding>
  <WButton menu-item class="disabled">Disabled 1</WButton>
  <WButton menu-item class="disabled">Disabled 2</WButton>
  <WButton menu-item class="disabled">Disabled 3</WButton>
</WMenu>

Horizontal 

<WMenu horizontal rounded class="w-auto">
  <WButton menu-item>Item 1</WButton>
  <WButton menu-item>Item 2</WButton>
  <WButton menu-item>Item 3</WButton>
</WMenu>

Horizontal responsive

Horizontal by default and vertical on small screen (sm).


<WMenu horizontal="sm" rounded class="w-auto">
  <WButton menu-item> Responsive 1</WButton>
  <WButton menu-item>Responsive 2</WButton>
  <WButton menu-item>Responsive 3</WButton>
</WMenu>

Only icons 

<WMenu rounded padding class="w-auto">
     <WButton menu-item>
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> </svg>
     </WButton>
     <WButton menu-item>
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg>
     </WButton>
     <WButton menu-item>
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> </svg>
     </WButton>
   </WMenu>
  • Category
  • Other Category
<WMenu padding>
  <span class="menu-title">Category</span>
  <WButton menu-item>Item 1</WButton>
  <WButton menu-item>Item 2</WButton>
  <span class="menu-title">Other Category</span>
  <WButton menu-item>Item 3</WButton>
  <WButton menu-item>Item 4</WButton>
</WMenu>