How to Use Bootstrap Dropdown in Angular – CoreUI Integration Guide

Łukasz Holeczek Follow Łukasz Holeczek on GitHub Connect with Łukasz Holeczek on LinkedIn Follow Łukasz Holeczek on X (Twitter)

Wednesday, July 9, 2025

#how-to #angular

Dropdown menus are a UI staple — from user avatars to action menus, they power some of the most important interactive patterns in web apps. But when working with Angular and Bootstrap, you don’t want to rely on data-bs-toggle="dropdown" or imperatively manage DOM 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.

Angular

Bootstrap

React.js

Vue.js

In this guide, you’ll learn how to implement a Bootstrap-style dropdown in Angular using the CDropdown component from CoreUI for Angular — clean, declarative, accessible, and SSR-safe.

👤 Who should read this?

This article is for Angular developers who:

• Use Bootstrap 5 styles or CoreUI Angular components.
• Need dropdowns that are declarative, accessible, and reusable.
• Want a native Angular component — not Bootstrap’s DOM-based JS.
• Care about keyboard navigation, responsiveness, and custom content inside dropdowns.

🧨 Why Bootstrap’s Native Dropdown JS Doesn’t Fit Angular

The default Bootstrap 5 approach looks like:

<button data-bs-toggle="dropdown">Menu</button>
<ul class="dropdown-menu">…</ul>

This method has several issues in Angular apps:

✅ The Angular Way: CDropdown from CoreUI

CoreUI’s CDropdown component is built specifically for Angular:

• Fully declarative structure using Angular components.
• Bootstrap 5-compatible styles out of the box.
• Composed using subcomponents: CDropdownToggle, CDropdownMenu, and CDropdownItem.
• Built-in accessibility: ARIA roles, keyboard support, ESC key, focus trap.
• Works seamlessly in SSR environments (e.g. Angular Universal).

⚙️ Example: Basic Action Dropdown

app.component.html

<c-dropdown>
  <c-dropdown-toggle color="primary">Actions</c-dropdown-toggle>
  <c-dropdown-menu>
    <c-dropdown-item href="#">Edit</c-dropdown-item>
    <c-dropdown-item href="#">Duplicate</c-dropdown-item>
    <c-dropdown-item href="#">Delete</c-dropdown-item>
  </c-dropdown-menu>
</c-dropdown>

🧪 What You Get Automatically

🧩 Advanced Example: Avatar Dropdown in Header

<c-dropdown alignment="end">
  <c-dropdown-toggle color="light">
    <img src="/assets/user.jpg" class="rounded-circle" width="32" alt="User avatar" />
  </c-dropdown-toggle>
  <c-dropdown-menu>
    <c-dropdown-item href="#">Profile</c-dropdown-item>
    <c-dropdown-item href="#">Settings</c-dropdown-item>
    <c-dropdown-item href="#">Logout</c-dropdown-item>
  </c-dropdown-menu>
</c-dropdown>

You can also use buttons, icons, badges, or form inputs inside the dropdown menu.

🔧 Common Props

• alignment="end" – right-align dropdown
• placement="top|bottom|left|right" – control dropdown position
• trigger="click|hover" – control how it opens

<c-dropdown alignment="end" placement="bottom">

❓ FAQ

Can I open/close the dropdown programmatically?

Yes — use visible and (visibleChange) if needed for manual control.

Is it mobile-friendly and responsive?

Yes — dropdowns adapt to small viewports automatically.

Does it support dark mode?

Yes — inherits Bootstrap theme variables.

Can I use it in SSR (Angular Universal)?

Absolutely — CDropdown works without direct DOM access.

🧠 Why CoreUI Dropdown Makes a Difference

Dropdowns may seem simple, but proper behavior includes:

• Focus management,
• Outside click detection,
• ESC key handling,
• Proper ARIA and accessibility support.

With CoreUI for Angular, you don’t need to polyfill Bootstrap’s behavior or bind manually — just use native Angular inputs and outputs.

➕ Next Steps

• 📘 View CDropdown Angular Docs
• 💻 Try the Angular Admin Template
• 💬 Star or contribute on GitHub

About the Author

Follow Łukasz Holeczek on GitHub Connect with Łukasz Holeczek on LinkedIn Follow Łukasz Holeczek on X (Twitter)

Ł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.