<x-bui/>
NPM GitHub
On this page

# Default 

<x-dropdown>
  <x-button toggle="dropdown" aria-expanded="false">Toggle dropdown</x-button>
  <x-dropdown.menu>
    <x-dropdown.item.a href="#">First item</x-dropdown.item.a>
    <x-dropdown.item.a>Second item</x-dropdown.item.a>
    <x-dropdown.item.a>Third item</x-dropdown.item.a>
  </x-dropdown.menu>
</x-dropdown>
First item Second item Third item

# Directions 

<x-dropdown centered>
  ...
</x-dropdown>

<x-dropdown up>
  ...
</x-dropdown>

<x-dropdown start>
  ...
</x-dropdown>

<x-dropdown end>
  ...
</x-dropdown>

<x-dropdown up-centered>
  ...
</x-dropdown>

<x-dropdown direction="centered">
  ...
</x-dropdown>

<x-dropdown direction="up">
  ...
</x-dropdown>

<x-dropdown direction="start">
  ...
</x-dropdown>

<x-dropdown direction="end">
  ...
</x-dropdown>

<x-dropdown direction="up-centered">
  ...
</x-dropdown>
First item Second item Third item
First item Second item Third item
First item Second item Third item
First item Second item Third item
First item Second item Third item
First item Second item Third item
First item Second item Third item
First item Second item Third item
First item Second item Third item
First item Second item Third item

By default, the dropdown use a div tag for .dropdown-menu . In case you want a ul tag, use the prop list . For avoid to add to each dropdown item, you can add once to x-dropdown.menu by using aware:list . It can be just aware:list or aware:list="true" for use list and aware:list="false" for use div . 

<x-dropdown>
  <x-button toggle="dropdown" aria-expanded="false">Toggle dropdown</x-button>
  <x-dropdown.menu aware:list>
    <x-dropdown.item.a href="https://github.com">First item</x-dropdown.item.a>
    <x-dropdown.item.a>Second item</x-dropdown.item.a>
    <x-dropdown.item.a>Third item</x-dropdown.item.a>
  </x-dropdown.menu>
</x-dropdown>

# Dropdown item as link, button or text

By default the dropdown item use link, if you want to use a button instead, then use x-dropdown.item.button . Dropdown item can also be any content, so you can use the x-dropdown.item.text component as shown below. 

<x-dropdown>
  <x-button toggle="dropdown" aria-expanded="false">Toggle dropdown</x-button>
  <x-dropdown.menu>
    <x-dropdown.item.text>Dropdown item text</x-dropdown.item.text>
    <x-dropdown.item.a href="https://github.com">Dropdown item link</x-dropdown.item.a>
    <x-dropdown.item.button>Dropdown item button</x-dropdown.item.button>
  </x-dropdown.menu>
</x-dropdown>
Dropdown item text Dropdown item link