How to Use Bootstrap Dropdown in Vue 3 – CoreUI Integration Guide
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Bootstrap dropdowns are everywhere — in headers, sidebars, tables, toolbars. But if you’re using Vue 3, you probably don’t want to manage them via data-bs-toggle or vanilla JS events.
Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.
In this article, you’ll learn how to use a Bootstrap-style dropdown in Vue 3 the modern way — using CDropdown from CoreUI for Vue. It’s a declarative, SSR-safe component with full accessibility and Bootstrap 5 compatibility.
👤 Who is this for?
You’ll benefit from this guide if:
- You’re building a Vue 3 app styled with Bootstrap or CoreUI.
- You want a declarative dropdown menu, controlled through Vue logic.
- You care about accessibility, keyboard support, and mobile responsiveness.
- You don’t want to mess with refs, event listeners, or Bootstrap’s JS plugins.
🧨 Why Bootstrap Native Dropdowns Don’t Fit Well in Vue
In Bootstrap 5, dropdowns are still managed via DOM attributes like:
<button data-bs-toggle="dropdown">Menu</button>
<ul class="dropdown-menu">…</ul>
Which requires:
- DOM manipulation,
- event binding,
- manual initialization & teardown.
These approaches conflict with Vue’s reactive, declarative model — especially in dynamic or server-rendered apps.
✅ The Vue-Friendly Solution: CDropdown from CoreUI
CoreUI’s CDropdown component solves these issues:
- Declarative structure using named components (
CDropdownToggle,CDropdownMenu,CDropdownItem) - Supports Bootstrap 5 styling by default
- Focuses on accessibility (keyboard, ARIA roles)
- Easily composable with buttons, icons, or avatars
- Works in SSR (e.g. Nuxt 3) without needing
windowordocument
⚙️ Example: Basic Dropdown with Actions
<template>
<CDropdown>
<CDropdownToggle color="primary">Actions</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Edit</CDropdownItem>
<CDropdownItem href="#">Duplicate</CDropdownItem>
<CDropdownItem href="#">Delete</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
<script setup>
import {
CDropdown,
CDropdownToggle,
CDropdownMenu,
CDropdownItem
} from '@coreui/vue'
</script>
🧪 Features You Get Out-of-the-Box
| Feature | ✅ Supported |
|---|---|
| Bootstrap 5 styling | ✅ |
| Declarative toggle + menu | ✅ |
| Accessibility / keyboard support | ✅ |
| SSR-safe / Nuxt-compatible | ✅ |
| Right-aligned menus | ✅ via alignment="end" |
| Custom triggers (icons, avatars) | ✅ |
🧩 Example: Avatar Dropdown in Navbar
<CDropdown alignment="end">
<CDropdownToggle color="light">
<img src="/avatar.jpg" alt="user" class="rounded-circle" width="32" />
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Profile</CDropdownItem>
<CDropdownItem href="#">Settings</CDropdownItem>
<CDropdownItem href="#">Logout</CDropdownItem>
</CDropdownMenu>
</CDropdown>
❓ FAQ
Can I control dropdown visibility manually?
Yes — CoreUI exposes visible and @visible-change props/events if needed.
Does this support dark mode?
Yes — inherits Bootstrap dark mode styles if active.
Is it SSR-safe for use in Nuxt 3?
Yes — no dependency on document or window.
Can I use icons, badges, or form elements inside?
Absolutely — CoreUI dropdowns are slot-based and highly composable.
🧠 Why it matters
Dropdowns are simple on the surface — but hard to implement well:
- They must be accessible (keyboard, ARIA)
- Must close on outside click or ESC
- Need to work inside headers, tables, or modals
Using CoreUI’s CDropdown lets you skip edge cases and get a rock-solid dropdown out of the box — while still looking like Bootstrap 5.
➕ Next Steps
- 📘 CDropdown Docs for Vue
- 🧱 Try the Vue 3 Admin Templates
- ⭐ Star the GitHub repo
Declarative, Bootstrap-styled, accessible dropdowns — built natively for Vue 3. Use CoreUI and build faster without reinventing common UI patterns.
