How to Use Bootstrap Dropdown in React the Right Way – with CoreUI

Friday, June 20, 2025

#how-to #html

If you’re using React and want to build dropdowns that look and behave like Bootstrap 5, there’s a better way than relying on data-bs-toggle or manual DOM manipulation. React applications need declarative, accessible, and lifecycle-aware components — and CoreUI for React delivers exactly that.

In this article, you’ll learn how to implement Bootstrap-style dropdowns in React using the CDropdown component from CoreUI — cleanly, idiomatically, and without hacks.

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.

👤 Who is this for?

This tutorial is perfect for developers who:

Use React with Bootstrap styles in dashboards or B2B UIs.
Want dropdowns that integrate with state, props, and React lifecycle.
Need keyboard-accessible, accessible, responsive dropdowns.
Are tired of fighting with data-bs-toggle, refs, or Popper.js.

Bootstrap’s dropdowns rely on imperative, DOM-based JavaScript behavior. Even in Bootstrap 5 (which dropped jQuery), dropdowns require data-bs-toggle="dropdown" and manual instantiation in JavaScript.

That leads to:

Issue	Why it’s a problem in React
DOM-based logic	Conflicts with React’s virtual DOM.
Manual lifecycle	No automatic teardown / re-initialization.
Uncontrolled state	Cannot toggle dropdowns using React state.
`data-bs-*` usage	Not idiomatic, not composable, breaks on SSR.

✅ The Solution: `CDropdown` from CoreUI for React

CoreUI’s CDropdown component wraps Bootstrap styling with React-native behavior:

Full control via props and state
Compatible with server-side rendering (SSR)
No data-bs-toggle, no JS initializers
Accessible by default (keyboard navigation, ARIA roles)

import React from 'react'
import {
  CDropdown,
  CDropdownToggle,
  CDropdownMenu,
  CDropdownItem
} from '@coreui/react'

const DropdownExample = () => {
  return (
    <CDropdown>
      <CDropdownToggle color="primary">Actions</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Edit</CDropdownItem>
        <CDropdownItem href="#">Duplicate</CDropdownItem>
        <CDropdownItem href="#">Delete</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}

export default DropdownExample

🧪 Features you get by default

Feature	✅ Supported
Controlled visibility (via props)	✅
Bootstrap 5+ styling	✅
Accessibility (`role`, ARIA, keyboard)	✅
Works inside modals, toolbars, navs	✅
Custom positioning with `direction` prop	✅
Compatible with Next.js / SSR	✅

<CDropdown alignment="end">
  <CDropdownToggle color="light">User</CDropdownToggle>
  <CDropdownMenu>
    <CDropdownItem href="#">Profile</CDropdownItem>
    <CDropdownItem href="#">Logout</CDropdownItem>
  </CDropdownMenu>
</CDropdown>

You can also nest dropdowns in buttons, avatars, icons, or list groups.

🤔 When not to use `CDropdown`

Avoid CDropdown if:

You’re building complex multilevel menus with custom animation logic (e.g., Framer Motion).
You need full headless control (then use Headless UI or Radix UI).
You are not using Bootstrap styles at all.

But for most dashboard UIs or admin panels? It’s exactly what you need.

❓ FAQ

Can I trigger dropdowns manually via state?

Yes — use CDropdown’s visible and onVisibleChange props for controlled mode.

Does this support dark mode?

Yes — inherits Bootstrap theme variables. You can also style dropdowns using utility classes.

Is CoreUI required to use this?

Yes — CDropdown is part of the CoreUI for React component library.

🧠 Why it matters

Dropdowns are deceptively tricky. You need to manage:

Open/close logic,
Click outside behavior,
Keyboard accessibility,
Focus trap and escape key.

Instead of reinventing the wheel, CoreUI gives you production-ready dropdowns — Bootstrap styled, React compatible, and cleanly isolated.

➕ What’s next?

📘 Read CDropdown Docs
🧑‍💻 Explore the CoreUI React Admin Template
⭐ Star the GitHub repo

Don’t fight with Bootstrap dropdowns in React. Use CoreUI’s dropdowns for a seamless React + Bootstrap developer experience.

About the Author

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 20 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.

With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.

Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.

Learn more about CoreUI’s solutions and see how your business can benefit from working with us.

How to Use Bootstrap Dropdown in React the Right Way – with CoreUI

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.