How to Use Bootstrap Dropdown in Vue 3 – CoreUI Integration Guide

Vue Bootstrap Dropdown

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.

Table of Contents

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 window or document

⚙️ 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


Declarative, Bootstrap-styled, accessible dropdowns — built natively for Vue 3. Use CoreUI and build faster without reinventing common UI patterns.

About the Author