Dropdown

A contextual menu for displaying a list of actions or options.

Default Dropdown

Profile 
<mijnui:dropdown>
    <mijnui:dropdown.trigger>Profile</mijnui:dropdown.trigger>
    <mijnui:dropdown.content align="right">
        <mijnui:dropdown.body>
            <mijnui:list class="min-w-32">
                <mijnui:list.item href="">Profile</mijnui:list.item>
                <mijnui:list.item href="">Settings</mijnui:list.item>
                <mijnui:list.item href="">Logout</mijnui:list.item>
            </mijnui:list>
        </mijnui:dropdown.body>
    </mijnui:dropdown.content>
</mijnui:dropdown>

Dropdown content position

Use align in content
align="left"
align="right"
Profile 
<mijnui:dropdown>
    <mijnui:dropdown.trigger>Profile</mijnui:dropdown.trigger>
    <mijnui:dropdown.content align="left">
        <mijnui:dropdown.body>
            <mijnui:list class="min-w-32">
                <mijnui:list.item href="">Profile</mijnui:list.item>
                <mijnui:list.item href="">Settings</mijnui:list.item>
                <mijnui:list.item href="">Logout</mijnui:list.item>
            </mijnui:list>
        </mijnui:dropdown.body>
    </mijnui:dropdown.content>
</mijnui:dropdown>

Dropdown with avatar

<mijnui:dropdown>
    <mijnui:dropdown.trigger>
           <mijnui:avatar src="https://cdn-icons-png.flaticon.com/512/8608/8608769.png"></mijnui:avatar>
    </mijnui:dropdown.trigger>
    <mijnui:dropdown.content align="left">
        <mijnui:dropdown.body>
            <mijnui:list class="min-w-32">
                <mijnui:list.item href="">Profile</mijnui:list.item>
                <mijnui:list.item href="">Settings</mijnui:list.item>
                <mijnui:list.item href="">Logout</mijnui:list.item>
            </mijnui:list>
        </mijnui:dropdown.body>
    </mijnui:dropdown.content>
</mijnui:dropdown>

Previous

Checkboxes

Next

Icon

On this page