Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included dropdown JavaScript plugin.

HTML

                        
    <div class="dropdown" x-data="{ open: false }">
        <button class="btn btn-primary dropdown-toggle" @click="open = !open" @click.away="open = false" :aria-expanded="open">
            Button
        </button>
        <ul class="dropdown-menu" x-show="open" :class="{ 'show': open, 'hide': !open }">
            <li>
                <h6 class="dropdown-header">Header</h6>
            </li>
            <li><a href="#" class="dropdown-item">Dropdown link 1</a></li>
            <li><a href="#" class="dropdown-item">Dropdown link 2</a></li>
            <li><a href="#" class="dropdown-item">Dropdown link 3</a></li>
            <hr class="dropdown-divider">
            <li><a class="dropdown-item disabled">Dropdown link 4</a></li>
        </ul>
    </div>

Introduction

Components

Dropdown