- Elements
- Dropdowns
Basic
Code
<!-- default -->
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn btn-primary dropdown-toggle" @click="toggle">Action
<svg> ... </svg>
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<!-- outline -->
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" @click="toggle">Action
<svg> ... </svg></button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("dropdown", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Dropup
Code
<!-- default -->
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 bottom-full !mt-0 mb-1 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
<button class="btn btn-info dropdown-toggle inline-flex" @click="toggle">Up
<svg> ... </svg>
</button>
</div>
<!-- outline -->
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn btn-outline-info dropdown-toggle inline-flex" @click="toggle">Up
<svg> ... </svg>
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 bottom-full !mt-0 mb-1 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("dropdown", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Dropright
Code
<!-- default -->
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn btn-warning dropdown-toggle" @click="toggle">Right
<svg> ... </svg>
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:left-full rtl:right-full top-0 !mt-0 ltr:ml-1 rtl:mr-1 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<!-- outline -->
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn btn-outline-warning dropdown-toggle" @click="toggle">Right
<svg> ... </svg>
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:left-full rtl:right-full top-0 !mt-0 ltr:ml-1 rtl:mr-1 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("dropdown", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Dropleft
Code
<!-- default -->
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn btn-danger dropdown-toggle" @click="toggle">
<svg> ... </svg>
Left
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-full rtl:left-full top-0 !mt-0 ltr:mr-1 rtl:ml-1 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<!-- outline -->
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn btn-outline-danger dropdown-toggle" @click="toggle">
<svg> ... </svg>
Left
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-full rtl:left-full top-0 !mt-0 ltr:mr-1 rtl:ml-1 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("dropdown", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Small Button
Code
<!-- default -->
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn btn-dark btn-sm dropdown-toggle" @click="toggle">Small Button
<svg> ... </svg></button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<!-- outline -->
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" @click="toggle">Small Button
<svg> ... </svg></button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("dropdown", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Large Button
Code
<!-- default -->
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn btn-success btn-lg dropdown-toggle" @click="toggle">Large Button
<svg> ... </svg></button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<!-- outline -->
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn btn-outline-success btn-lg dropdown-toggle" @click="toggle">Large Button
<svg> ... </svg></button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("dropdown", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Grouped Dropdown Buttons
Code
<!-- default -->
<div class="relative inline-flex align-middle">
<button type="button" class="btn btn-secondary ltr:rounded-r-none rtl:rounded-l-none">1</button>
<button type="button" class="btn btn-secondary rounded-none">2</button>
<div class="relative inline-flex align-middle">
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button type="button" class="btn dropdown-toggle btn-secondary flex ltr:rounded-l-none rtl:rounded-r-none" @click="toggle">Dropdown
<svg> ... </svg>
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!-- outline -->
<div class="relative inline-flex align-middle">
<button type="button" class="btn btn-outline-secondary ltr:border-r-0 rtl:border-l-0 ltr:rounded-r-none rtl:rounded-l-none">1</button>
<button type="button" class="btn btn-outline-secondary ltr:border-r-0 rtl:border-l-0 rounded-none">2</button>
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button type="button" class="btn dropdown-toggle btn-outline-secondary flex ltr:rounded-l-none rtl:rounded-r-none" @click="toggle">Dropdown
<svg> ... </svg>
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("dropdown", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Split
Code
<!-- default -->
<div class="dropdown inline-flex" x-data="dropdown" @click.outside="open = false">
<button type="button" class="btn btn-primary ltr:rounded-r-none rtl:rounded-l-none">Action</button>
<button type="button" class="btn dropdown-toggle btn-primary ltr:rounded-l-none rtl:rounded-r-none border-l-[#4468fd] before:border-[5px] before:border-l-transparent before:border-r-transparent before:border-t-inherit before:border-b-0 before:inline-block before:border-t-white-light" @click="toggle">
<span class="sr-only">Toggle dropdown</span>
</button>
<ul role="menu" x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 top-full whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<!-- outline -->
<div class="dropdown inline-flex" x-data="dropdown" @click.outside="open = false">
<button type="button" class="btn btn-outline-primary ltr:rounded-r-none rtl:rounded-l-none">Action</button>
<button type="button" class="btn btn-outline-primary ltr:rounded-l-none rtl:rounded-r-none dropdown-toggle before:border-[5px] before:border-l-transparent before:border-r-transparent before:border-t-inherit before:border-b-0 before:inline-block hover:before:border-t-white-light" @click="toggle">
<span class="sr-only">Toggle dropdown</span>
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 top-full whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("dropdown", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Custom Dropdown
Code
<!-- custom -->
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn p-0 rounded-none border-0 shadow-none dropdown-toggle text-black dark:text-white-dark hover:text-primary dark:hover:text-primary" @click="toggle">
<svg> ... </svg>
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:left-0 rtl:right-0 bottom-full !mt-0 mb-1 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn p-0 rounded-none border-0 shadow-none dropdown-toggle text-black dark:text-white-dark hover:text-primary dark:hover:text-primary" @click="toggle">
<svg> ... </svg>
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:left-0 rtl:right-0 bottom-full !mt-0 mb-1 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn p-0 rounded-none border-0 shadow-none dropdown-toggle text-black dark:text-white-dark hover:text-primary dark:hover:text-primary" @click="toggle">
<svg> ... </svg>
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:left-0 rtl:right-0 bottom-full !mt-0 mb-1 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button class="btn p-0 rounded-none border-0 shadow-none dropdown-toggle text-black dark:text-white-dark hover:text-primary dark:hover:text-primary" @click="toggle">
<svg> ... </svg>
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 bottom-full !mt-0 mb-1 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("dropdown", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
© . Vristo All rights reserved.