Dropdown

How it works

Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. There is three types of tags that can be used for create a button: button, a and input.

Basic example

<x-dropdown id="BasicDemo">
    <x-dropdown.toggle>Toggle dropdown</x-dropdown.toggle>
    <x-dropdown.menu>
        <x-dropdown.item href="/docs/components/introduction">Link one</x-dropdown.item>
        <x-dropdown.item href="/docs/components/accordion">Link two</x-dropdown.item>
        <x-dropdown.divider/>
        <x-dropdown.item href="/docs/components/dropdown" aria-current="true" active>Link three</x-dropdown.item>
    </x-dropdown.menu>
</x-dropdown>

<div class="dropdown">
  <button id="dropdownMenuBasicDemo"
       data-bs-toggle="dropdown"
       aria-expanded="false"
       data-bs-reference="toggle"
       class="dropdown-toggle btn btn-primary">Toggle dropdown</button>
  <div class="dropdown-menu"
       aria-labelledby="dropdownMenuBasicDemo">
    <a class="dropdown-item"
         href="/docs/components/introduction">Link one</a> <a class="dropdown-item"
         href="/docs/components/accordion">Link two</a>
    <div class="dropdown-divider">
    </div>
    <a class="dropdown-item active"
         href="/docs/components/dropdown"
         aria-current="true"
         active="active">Link three</a>
  </div>
</div>

You can use prop to instead of href for x-dropdown.item's component. In this case behind the scene will be used link component, which make the link active automagically by checking current route name or current URL.

List example

By default the dropdown items are link wrapped inside a div tag. If you want to use instead use a ul, then pass prop list. Simple as that?

<x-dropdown id="ListDemo" list>
    <x-dropdown.toggle>Toggle dropdown list</x-dropdown.toggle>
    <x-dropdown.menu>
        <x-dropdown.item href="/docs/components/introduction">Link one</x-dropdown.item>
        <x-dropdown.item href="/docs/components/accordion">Link two</x-dropdown.item>
        <x-dropdown.divider/>
        <x-dropdown.item href="/docs/components/dropdown" aria-current="true" active>Link three</x-dropdown.item>
    </x-dropdown.menu>
</x-dropdown>

<div class="dropdown">
  <button id="dropdownMenuListDemo"
       data-bs-toggle="dropdown"
       aria-expanded="false"
       data-bs-reference="toggle"
       class="dropdown-toggle btn btn-primary">Toggle dropdown list</button>
  <div class="dropdown-menu"
       aria-labelledby="dropdownMenuListDemo">
    <ul>
      <li>
        <a class="dropdown-item"
            href="/docs/components/introduction">Link one</a>
      </li>

      <li>
        <a class="dropdown-item"
            href="/docs/components/accordion">Link two</a>
      </li>

      <li style="list-style: none; display: inline">
        <div class="dropdown-divider">
        </div>
      </li>

      <li>
        <a class="dropdown-item active"
            href="/docs/components/dropdown"
            aria-current="true"
            active="active">Link three</a>
      </li>
    </ul>
  </div>
</div>

Using different dropdown toggle

Bootstrap has three type of dropdown toggle: button, link or button split. Use component x-dropdown.toggle.a or x-dropdown.toggle.split for toggle dropdown with a link or button split. By default, it's a button. You can use directly the component x-dropdown.toggle.button, x-dropdown.toggle.a and x-dropdown.toggle.split Or you just pass prop type to x-dropdown.toggle.

<x-dropdown id="ToggleDemo">
    <x-dropdown.toggle.a>Toggle dropdown link</x-dropdown.toggle.a>
    <x-dropdown.menu>
        <x-dropdown.item href="/docs/components/introduction">Link one</x-dropdown.item>
        <x-dropdown.item href="/docs/components/accordion">Link two</x-dropdown.item>
        <x-dropdown.divider/>
        <x-dropdown.item href="/docs/components/dropdown" aria-current="true" active>Link three</x-dropdown.item>
    </x-dropdown.menu>
</x-dropdown>

<x-dropdown id="ToggleDemo2" split>
    <x-dropdown.toggle>Toggle dropdown split</x-dropdown.toggle>
    <x-dropdown.menu>
        <x-dropdown.item href="/docs/components/introduction">Link one</x-dropdown.item>
        <x-dropdown.item href="/docs/components/accordion">Link two</x-dropdown.item>
        <x-dropdown.divider/>
        <x-dropdown.item href="/docs/components/dropdown" aria-current="true" active>Link three</x-dropdown.item>
    </x-dropdown.menu>
</x-dropdown>

<div class="dropdown">
  <a href="#"
       id="dropdownMenuToggleDemo"
       data-bs-toggle="dropdown"
       role="button"
       aria-expanded="false"
       class="dropdown-toggle"
       name="dropdownMenuToggleDemo">Toggle dropdown link</a>
  <div class="dropdown-menu"
       aria-labelledby="dropdownMenuToggleDemo">
    <a class="dropdown-item"
         href="/docs/components/introduction">Link one</a> <a class="dropdown-item"
         href="/docs/components/accordion">Link two</a>
    <div class="dropdown-divider">
    </div>
    <a class="dropdown-item active"
         href="/docs/components/dropdown"
         aria-current="true"
         active="active">Link three</a>
  </div>
</div>
<br>
<br>

<div class="dropdown btn-group">
  <button type="button"
       class="btn btn-primary">Toggle dropdown split</button> <button id="dropdownMenuToggleDemo2"
       data-bs-toggle="dropdown"
       aria-expanded="false"
       data-bs-reference="toggle"
       class="dropdown-toggle dropdown-toggle-split btn btn-primary"><span class="visually-hidden">Toggle Dropdown</span></button>
  <div class="dropdown-menu"
       aria-labelledby="dropdownMenuToggleDemo2">
    <a class="dropdown-item"
         href="/docs/components/introduction">Link one</a> <a class="dropdown-item"
         href="/docs/components/accordion">Link two</a>
    <div class="dropdown-divider">
    </div>
    <a class="dropdown-item active"
         href="/docs/components/dropdown"
         aria-current="true"
         active="active">Link three</a>
  </div>
</div>

It's important to add prop split to dropdown because also .dropdown need to have a class .btn-group in order to display correctly the split button. The prop split it's passed down to component x-dropdown.toggle and used to display the split button.

Dropdown as list using component

You can also use component x-dropdown.menu.ul for create a dropdown as list.

<x-dropdown id="ListDemo2">
    <x-dropdown.toggle>Toggle dropdown list</x-dropdown.toggle>
    <x-dropdown.menu.ul>
        <x-dropdown.item.li href="/docs/components/introduction">Link one</x-dropdown.item.li>
        <x-dropdown.item.li href="/docs/components/accordion">Link two</x-dropdown.item.li>
        <x-dropdown.divider.li/>
        <x-dropdown.item.li href="/docs/components/dropdown" active>Link three</x-dropdown.item.li>
    </x-dropdown.menu.ul>
</x-dropdown>

<div class="dropdown">
  <button id="dropdownMenuListDemo2"
       data-bs-toggle="dropdown"
       aria-expanded="false"
       data-bs-reference="toggle"
       class="dropdown-toggle btn btn-primary">Toggle dropdown list</button>
  <ul class="dropdown-menu"
      aria-labelledby="dropdownMenuListDemo2">
    <li>
      <a class="dropdown-item"
          href="/docs/components/introduction">Link one</a>
    </li>

    <li>
      <a class="dropdown-item"
          href="/docs/components/accordion">Link two</a>
    </li>

    <li>
      <div class="dropdown-divider">
      </div>
    </li>

    <li>
      <a class="dropdown-item active"
          href="/docs/components/dropdown"
          active="active">Link three</a>
    </li>
  </ul>
</div>

Dropdown size

You can use prop size to change size of dropdown.

<x-dropdown id="SizeLargeDemo" size="lg">
    <x-dropdown.toggle>Toggle dropdown large</x-dropdown.toggle>
    <x-dropdown.menu>
        <x-dropdown.item href="/docs/components/introduction">Link one</x-dropdown.item>
        <x-dropdown.item href="/docs/components/accordion">Link two</x-dropdown.item>
        <x-dropdown.divider/>
        <x-dropdown.item href="/docs/components/dropdown" active>Link three</x-dropdown.item>
    </x-dropdown.menu>
</x-dropdown>

<x-dropdown id="SizeSmallDemo" size="sm">
    <x-dropdown.toggle>Toggle dropdown small</x-dropdown.toggle>
    <x-dropdown.menu>
        <x-dropdown.item href="/docs/components/introduction">Link one</x-dropdown.item>
        <x-dropdown.item href="/docs/components/accordion">Link two</x-dropdown.item>
        <x-dropdown.divider/>
        <x-dropdown.item href="/docs/components/dropdown" active>Link three</x-dropdown.item>
    </x-dropdown.menu>
</x-dropdown>

<div class="dropdown">
  <button id="dropdownMenuSizeLargeDemo"
       data-bs-toggle="dropdown"
       aria-expanded="false"
       data-bs-reference="toggle"
       class="dropdown-toggle btn btn-primary btn-lg">Toggle dropdown large</button>
  <div class="dropdown-menu"
       aria-labelledby="dropdownMenuSizeLargeDemo">
    <a class="dropdown-item"
         href="/docs/components/introduction">Link one</a> <a class="dropdown-item"
         href="/docs/components/accordion">Link two</a>
    <div class="dropdown-divider">
    </div>
    <a class="dropdown-item active"
         href="/docs/components/dropdown"
         active="active">Link three</a>
  </div>
</div>
<br>
<br>

<div class="dropdown">
  <button id="dropdownMenuSizeSmallDemo"
       data-bs-toggle="dropdown"
       aria-expanded="false"
       data-bs-reference="toggle"
       class="dropdown-toggle btn btn-primary btn-sm">Toggle dropdown small</button>
  <div class="dropdown-menu"
       aria-labelledby="dropdownMenuSizeSmallDemo">
    <a class="dropdown-item"
         href="/docs/components/introduction">Link one</a> <a class="dropdown-item"
         href="/docs/components/accordion">Link two</a>
    <div class="dropdown-divider">
    </div>
    <a class="dropdown-item active"
         href="/docs/components/dropdown"
         active="active">Link three</a>
  </div>
</div>

Dropdown dark

You can use prop dark to make your dropdown dark.

<x-dropdown id="DarkDemo" dark>
    <x-dropdown.toggle color="secondary">Toggle dropdown dark</x-dropdown.toggle>
    <x-dropdown.menu.ul>
        <x-dropdown.item.li href="/docs/components/introduction">Link one</x-dropdown.item.li>
        <x-dropdown.item.li href="/docs/components/accordion">Link two</x-dropdown.item.li>
        <x-dropdown.divider.li/>
        <x-dropdown.item.li href="/docs/components/dropdown" active>Link three</x-dropdown.item.li>
    </x-dropdown.menu.ul>
</x-dropdown>

<div class="dropdown">
  <button id="dropdownMenuDarkDemo"
       data-bs-toggle="dropdown"
       aria-expanded="false"
       data-bs-reference="toggle"
       class="dropdown-toggle btn btn-secondary"
       color="secondary">Toggle dropdown dark</button>
  <ul class="dropdown-menu dropdown-menu-dark"
      aria-labelledby="dropdownMenuDarkDemo">
    <li>
      <a class="dropdown-item"
          href="/docs/components/introduction">Link one</a>
    </li>

    <li>
      <a class="dropdown-item"
          href="/docs/components/accordion">Link two</a>
    </li>

    <li>
      <div class="dropdown-divider">
      </div>
    </li>

    <li>
      <a class="dropdown-item active"
          href="/docs/components/dropdown"
          active="active">Link three</a>
    </li>
  </ul>
</div>

As you may notice we have add prop color to dropdown toggle. You can also add this prop on component x-dropdown. As with other props, also these are passed down to child components.

Dropdown positions

You can use prop position to change the position of the dropdown.

<x-dropdown id="Dropup" position="up">
    <x-dropdown.toggle>Toggle Dropup</x-dropdown.toggle>

    <!-- dropdown.menu go here -->
</x-dropdown>

<x-dropdown id="Dropend" position="end">
    <x-dropdown.toggle>Toggle Dropend</x-dropdown.toggle>

    <!-- dropdown.menu go here -->
</x-dropdown>

<x-dropdown id="Dropstart" position="start">
    <x-dropdown.toggle>Toggle Dropstart</x-dropdown.toggle>

    <!-- dropdown.menu go here -->
</x-dropdown>

<!-- It's also valid to use prop up|end|start -->
<x-dropdown id="Dropstart" end>
    <x-dropdown.toggle>Toggle Dropend</x-dropdown.toggle>

    <!-- dropdown.menu go here -->
</x-dropdown>

<div class="d-flex justify-content-around">
  <div class="dropup">
    <button id="dropdownMenuDropup"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         data-bs-reference="toggle"
         class="dropdown-toggle btn btn-primary">Toggle Dropup</button>
    <div class="dropdown-menu"
         aria-labelledby="dropdownMenuDropup">
      <a class="dropdown-item"
           href="/docs/components/introduction">Link one</a> <a class="dropdown-item"
           href="/docs/components/accordion">Link two</a>
      <div class="dropdown-divider">
      </div>
      <a class="dropdown-item active"
           href="/docs/components/dropdown"
           active="active">Link three</a>
    </div>
  </div>

  <div class="dropend">
    <button id="dropdownMenuDropend"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         data-bs-reference="toggle"
         class="dropdown-toggle btn btn-primary">Toggle Dropend</button>
    <div class="dropdown-menu"
         aria-labelledby="dropdownMenuDropend">
      <a class="dropdown-item"
           href="/docs/components/introduction">Link one</a> <a class="dropdown-item"
           href="/docs/components/accordion">Link two</a>
      <div class="dropdown-divider">
      </div>
      <a class="dropdown-item active"
           href="/docs/components/dropdown"
           active="active">Link three</a>
    </div>
  </div>

  <div class="dropstart">
    <button id="dropdownMenuDropstart"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         data-bs-reference="toggle"
         class="dropdown-toggle btn btn-primary">Toggle Dropstart</button>
    <div class="dropdown-menu"
         aria-labelledby="dropdownMenuDropstart">
      <a class="dropdown-item"
           href="/docs/components/introduction">Link one</a> <a class="dropdown-item"
           href="/docs/components/accordion">Link two</a>
      <div class="dropdown-divider">
      </div>
      <a class="dropdown-item active"
           href="/docs/components/dropdown"
           active="active">Link three</a>
    </div>
  </div>
</div>

You can also use props up, start and end to obtain the same thing as shown in last example.

Dropdown using slot

If you want to use slots instead of child components, then find below an example.

<x-dropdown id="SlotDemo">
    <x-slot name="toggle">Toggle dropdown</x-slot>
    <x-slot name="menu">
        <x-dropdown.item href="/docs/components/introduction">Link one</x-dropdown.item>
        <x-dropdown.item href="/docs/components/accordion">Link two</x-dropdown.item>
        <x-dropdown.divider/>
        <x-dropdown.item href="/docs/components/dropdown" active>Link three</x-dropdown.item>
    </x-slot>
</x-dropdown>

<div class="dropdown">
  <button id="dropdownMenuSlotDemo"
       data-bs-toggle="dropdown"
       aria-expanded="false"
       data-bs-reference="toggle"
       class="dropdown-toggle btn btn-primary">Toggle dropdown</button>
  <div class="dropdown-menu"
       aria-labelledby="dropdownMenuSlotDemo">
    <a class="dropdown-item"
         href="/docs/components/introduction">Link one</a> <a class="dropdown-item"
         href="/docs/components/accordion">Link two</a>
    <div class="dropdown-divider">
    </div>
    <a class="dropdown-item active"
         href="/docs/components/dropdown"
         active="active">Link three</a>
  </div>
</div>

Dropstart with split button

Dropstart with split button require a different markup than others, so if you need such case, you can find below an example. See bootstrap docs about such markup.

<x-button.group>
    <x-dropdown id="DropstartSplitDemo" start group>
        <x-button toggle="dropdown" aria-expanded="false" class="dropdown-toggle dropdown-toggle-split">
            <span class="visually-hidden">Toggle Dropstart</span>
        </x-button>
        <x-dropdown.menu>
            <x-dropdown.item href="/docs/components/introduction">Link one</x-dropdown.item>
            <x-dropdown.item href="/docs/components/accordion">Link two</x-dropdown.item>
            <x-dropdown.divider/>
            <x-dropdown.item href="/docs/components/dropdown" active>Link three</x-dropdown.item>
        </x-dropdown.menu>
    </x-dropdown>
    <x-button>Split dropstart</x-button>
</x-button.group>

<div role="group"
     aria-label="Button group"
     class="btn-group">
  <div role="group"
       class="dropdown dropstart btn-group">
    <button type="button"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         class="btn btn-primary dropdown-toggle dropdown-toggle-split"><span class="visually-hidden">Toggle Dropstart</span></button>
    <div class="dropdown-menu dropdown-menu-start"
         aria-labelledby="dropdownMenuDropstartSplitDemo"
         data-bs-display="static">
      <a class="dropdown-item"
           href="/docs/components/introduction">Link one</a> <a class="dropdown-item"
           href="/docs/components/accordion">Link two</a>
      <div class="dropdown-divider">
      </div>
      <a class="dropdown-item active"
           href="/docs/components/dropdown"
           active="active">Link three</a>
    </div>
  </div>
  <button type="button"
       class="btn btn-primary">Split dropstart</button>
</div>