Dropdown Component

The Dropdown Button component is a versatile UI element that combines a button with a dropdown menu, allowing users to select from a list of options or trigger actions.

Hover open

By using the dropdown-hover helper class, you can enable dropdown activation for mouse hover events.

<div class="dropdown dropdown-hover">
    <div class="btn" tabindex="0">Dropdown</div>
    <div class="dropdown-menu w-56">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <!-- Add more -->
    </div>
</div>

<div className="dropdown dropdown-hover">
    <div className="btn" tabindex="0">Dropdown</div>
    <div className="dropdown-menu w-56">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <!-- Add more -->
    </div>
</div>

<details class="dropdown">
    <summary class="btn">Toggle Dropdown</summary>
    <div class="dropdown-menu">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
    </div>
</details>

<details className="dropdown">
    <summary className="btn">Toggle Dropdown</summary>
    <div className="dropdown-menu">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
    </div>
</details>

We are using the HTML <details> and <summary> tags for toggle dropdown. This approach allows for a simple and accessible way to show or hide content without requiring additional JavaScript.

<div class="dropdown">
    <div class="btn" tabindex="0">Dropdown</div>
    <div class="dropdown-menu w-56">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
    </div>
</div>

<div className="dropdown">
    <div className="btn" tabindex="0">Dropdown</div>
    <div className="dropdown-menu w-56">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
    </div>
</div>

Content Position

Align Right

<div class="dropdown dropdown-end">
    <div class="btn" tabindex="0">Dropdown</div>
    <div class="dropdown-menu w-56">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
    </div>
</div>

<div className="dropdown dropdown-end">
    <div className="btn" tabindex="0">Dropdown</div>
    <div className="dropdown-menu w-56">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
    </div>
</div>

Use the dropdown-end helper class to align end.

Align Top

<div class="dropdown dropdown-end">
    <div class="btn" tabindex="0">Dropdown</div>
    <div class="dropdown-menu w-56">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
    </div>
</div>

<div className="dropdown dropdown-end">
    <div className="btn" tabindex="0">Dropdown</div>
    <div className="dropdown-menu w-56">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
    </div>
</div>

Use the dropdown-top helper class to align top.

Align Top Right

<div class="dropdown dropdown-end">
    <div class="btn" tabindex="0">Dropdown</div>
    <div class="dropdown-menu w-56">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
    </div>
</div>

<div className="dropdown dropdown-end">
    <div className="btn" tabindex="0">Dropdown</div>
    <div className="dropdown-menu w-56">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
    </div>
</div>

Use the dropdown-top and dropdown-end helper classes to align top right.

You can easily use the Button Component in the Arts Oven UI to brand the dropdown button. This allows you to style the dropdown toggle without needing additional CSS.

<div class="dropdown">
    <div class="btn btn-info" tabindex="0">Dropdown</div>
    <div class="dropdown-menu w-56">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
    </div>
</div>

<div className="dropdown">
    <div className="btn btn-info" tabindex="0">Dropdown</div>
    <div className="dropdown-menu w-56">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
    </div>
</div>

Customizing with CSS Variables

You can customize the appearance of the component using following CSS variables.

:root {
    /* Dropdown content border width */
    --dropdown-border-width: 1px;
    /* Dropdown content border color */
    --dropdown-border-color: #FFFFFF;
    /* Dropdown content background color */
    --dropdown-background-color: #FFFFFF;
    /* Dropdown content border radius */
    --dropdown-border-radius: 5px;
    /* Dropdown content link hover */
    --dropdown-link-hover-bg: #FFFFFF;
}

Refer to the Customization Guide to learn more about how to use these variables to customize the components.

Contribute ideas!

Share Your Ideas! While we can’t guarantee that every request will be added, we will definitely consider your suggestions for future updates.

Dropdown Component

Hover open

Toggle dropdown

Clickable dropdown