bellisUI

Dropdowns plays nice with the Menu component. Under the hood It uses the Alpine's anchor plugin to control the position.

Property	Type	Description
id	?string	A unique identifier.
label	?string	The text content of the button.
icon	?string	The icon that should be shown on the left side. [default=chevron-down]
end	bool	If the dropdown should be aligned to the end. [default=false]
top	bool	If the dropdown should be aligned to the top. [default=false]
no-x-anchor	bool	If the dropdown should not contain an alpineJS anchor. [default=false]
scroll	bool	If the dropdown can be scrolled. [default=false]
max-height	?string	The maximum height of the dropdown. [default=max-h-96]
trigger	slot	Overwrite the button that opens the dropdown with custom html.

If you need value selection instead, check out the Select component.

Default

<c-dropdown>
    <c-menu-item title="Archive" icon="archive" />
    <c-menu-item title="Remove" icon="trash" />
    <c-menu-item title="Restore" icon="arrow-right" />
</c-dropdown>

Custom trigger

You can overwrite the button that opens the dropdown by using the "trigger" slot.

<c-dropdown>
    <c-slot:trigger>
        <c-button icon="bell" class="btn-circle" />
    </c-slot:trigger>

    <c-menu-item title="Archive" />
    <c-menu-item title="Move" />
</c-dropdown>

Alignment

<c-dropdown label="Hello" class="btn-warning" end>
    <c-menu-item title="It should align correctly on right side" />
    <c-menu-item title="Yes!" />
</c-dropdown>

By default, this component works with Alpine's anchor plugin. If you don't want to use it, just add no-x-anchor to the dropdown to manually control the position.

<c-dropdown label="Default" no-x-anchor>
    <c-menu-item title="Hey" />
    <c-menu-item title="How are you?" />
</c-dropdown>

<c-dropdown label="Top" no-x-anchor top>
    <c-menu-item title="Hey" />
    <c-menu-item title="How are you?" />
</c-dropdown>

<c-dropdown label="End" no-x-anchor end>
    <c-menu-item title="Hey" />
    <c-menu-item title="It should align correctly on end?" />
</c-dropdown>

Scroll & max. height

<c-dropdown label="Default">
    @foreach ($this->array as $item)
        <c-menu-item title="Item {{ $item }}" />
    @endforeach
</c-dropdown>

<c-dropdown label="Scroll" scroll>
    @foreach ($this->array as $item)
        <c-menu-item title="Item {{ $item }}" />
    @endforeach
</c-dropdown>

<c-dropdown label="Max height" scroll max-height="max-h-64">
    @foreach ($this->array as $item)
        <c-menu-item title="Item {{ $item }}" />
    @endforeach
</c-dropdown>