Dropdowns

Dropdowns are essential for selecting options in a user interface. The MIZ framework provides various dropdown styles for different use cases.

Basic Dropdowns #

Dropdown Button Direction Examples

                    

Dropdown button with icon
item 1
item 2
item 3
Dropdown button with icon
item 1
item 2
item 3
Dropdown button with icon
item 1
item 2
item 3
Dropdown button with icon
item 1
item 2
item 3
                    
                    

                        
                        
HTML
                        
                    
                    <div class="dropdown dropdown-bottom">
    <div class="btn btn-secondary on-primary-color gap-1">
        Dropdown button
        <i class="fa-solid fa-chevron-down"></i>
    </div>
    <ul class="bg-secondary-color on-primary-color all-border-small px-1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
    </ul>
</div>
                

Direction Classes #

You can position the Dropdown in different directions using the following classes:

Class	Description
.dropdown-bottom	Displays the dropdown below the button
.dropdown-top	Displays the dropdown above the button
.dropdown-right	Displays the dropdown to the right of the button
.dropdown-left	Displays the dropdown to the left of the button

Sizing #

You can adjust the size of the dropdown button and its content by applying size-related utility classes. The button can be resized to fit different UI needs.

                    

Dropdown button with icon
Action
Another action
Something else here
Dropdown button with icon
Action
Another action
Something else here
                    
                    

                        
                        
HTML
                        
                    
                    <div class="dropdown dropdown-bottom dropdown-sm">
    <div class="btn btn-secondary on-primary-color gap-1">
        Dropdown button
        <i class="fa-solid fa-chevron-down"></i>
    </div>
    <ul class="bg-secondary-color on-primary-color all-border-small px-1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
    </ul>
</div>
<div class="dropdown dropdown-bottom dropdown-lg">
    <div class="btn btn-secondary on-primary-color gap-1">
        Dropdown button
        <i class="fa-solid fa-chevron-down"></i>
    </div>
    <ul class="bg-secondary-color on-primary-color all-border-small px-1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
    </ul>
</div>
                

Dropdown Styles #

Class	Description
dropdown	Base class for dropdowns
dropdown-bottom	Aligns dropdown to open at the bottom

Additional Information #

• Dropdowns can be customized with various background colors and borders.
• The gap-1 class can be used to add space between the icon and the text in dropdown buttons.