Dropdown

<rhx-dropdown>
    <rhx-dropdown-trigger>
        <rhx-button rhx-variant="neutral" rhx-appearance="outlined">
            Actions &#9662;
        </rhx-button>
    </rhx-dropdown-trigger>
    <rhx-dropdown-item>Edit</rhx-dropdown-item>
    <rhx-dropdown-item>Duplicate</rhx-dropdown-item>
    <rhx-dropdown-divider />
    <rhx-dropdown-item>Archive</rhx-dropdown-item>
    <rhx-dropdown-item rhx-disabled="true">Delete</rhx-dropdown-item>
</rhx-dropdown>

<rhx-dropdown rhx-placement="bottom-start">
    <rhx-dropdown-trigger>
        <rhx-button rhx-variant="brand">Bottom Start &#9662;</rhx-button>
    </rhx-dropdown-trigger>
    <rhx-dropdown-item>Item A</rhx-dropdown-item>
    <rhx-dropdown-item>Item B</rhx-dropdown-item>
</rhx-dropdown>

<rhx-dropdown rhx-placement="bottom-end">
    <rhx-dropdown-trigger>
        <rhx-button rhx-variant="brand">Bottom End &#9662;</rhx-button>
    </rhx-dropdown-trigger>
    <rhx-dropdown-item>Item A</rhx-dropdown-item>
    <rhx-dropdown-item>Item B</rhx-dropdown-item>
</rhx-dropdown>

<rhx-dropdown rhx-placement="top-start">
    <rhx-dropdown-trigger>
        <rhx-button rhx-variant="brand">Top Start &#9652;</rhx-button>
    </rhx-dropdown-trigger>
    <rhx-dropdown-item>Item A</rhx-dropdown-item>
    <rhx-dropdown-item>Item B</rhx-dropdown-item>
</rhx-dropdown>

<rhx-dropdown rhx-stay-open="true">
    <rhx-dropdown-trigger>
        <rhx-button rhx-variant="neutral" rhx-appearance="outlined">
            Columns &#9662;
        </rhx-button>
    </rhx-dropdown-trigger>
    <rhx-dropdown-item rhx-type="checkbox" rhx-checked="true" rhx-value="name">
        Name
    </rhx-dropdown-item>
    <rhx-dropdown-item rhx-type="checkbox" rhx-checked="true" rhx-value="email">
        Email
    </rhx-dropdown-item>
    <rhx-dropdown-item rhx-type="checkbox" rhx-value="phone">
        Phone
    </rhx-dropdown-item>
    <rhx-dropdown-item rhx-type="checkbox" rhx-value="role">
        Role
    </rhx-dropdown-item>
</rhx-dropdown>

<rhx-dropdown>
    <rhx-dropdown-trigger>
        <rhx-button rhx-variant="neutral" rhx-appearance="outlined">
            Navigate &#9662;
        </rhx-button>
    </rhx-dropdown-trigger>
    <rhx-dropdown-item rhx-href="/">Home</rhx-dropdown-item>
    <rhx-dropdown-item rhx-href="/Docs/Components/Dropdowns">Dropdowns</rhx-dropdown-item>
    <rhx-dropdown-divider />
    <rhx-dropdown-item rhx-href="/Error">Error Page</rhx-dropdown-item>
</rhx-dropdown>

<rhx-dropdown>
    <rhx-dropdown-trigger>
        <rhx-button rhx-variant="brand" rhx-appearance="outlined">
            Actions &#9662;
        </rhx-button>
    </rhx-dropdown-trigger>
    <rhx-dropdown-item hx-post="/Docs/Components/Dropdowns?handler=Edit"
                       hx-target="#dropdown-result" hx-swap="innerHTML">
        Edit Item
    </rhx-dropdown-item>
    <rhx-dropdown-item hx-post="/Docs/Components/Dropdowns?handler=Duplicate"
                       hx-target="#dropdown-result" hx-swap="innerHTML">
        Duplicate Item
    </rhx-dropdown-item>
    <rhx-dropdown-divider />
    <rhx-dropdown-item hx-delete="/Docs/Components/Dropdowns?handler=Remove"
                       hx-target="#dropdown-result" hx-swap="innerHTML"
                       hx-confirm="Are you sure?">
        Delete Item
    </rhx-dropdown-item>
</rhx-dropdown>
<span id="dropdown-result">Select an action...</span>

<rhx-dropdown rhx-disabled="true">
    <rhx-dropdown-trigger>
        <rhx-button rhx-variant="neutral" rhx-appearance="outlined"
                    rhx-disabled="true">
            Disabled &#9662;
        </rhx-button>
    </rhx-dropdown-trigger>
    <rhx-dropdown-item>Unreachable</rhx-dropdown-item>
</rhx-dropdown>

<rhx-dropdown rhx-open="true">
    <rhx-dropdown-trigger>
        <rhx-button rhx-variant="success" rhx-appearance="outlined">
            Open &#9662;
        </rhx-button>
    </rhx-dropdown-trigger>
    <rhx-dropdown-item>Already visible</rhx-dropdown-item>
    <rhx-dropdown-item>Second item</rhx-dropdown-item>
</rhx-dropdown>