How to use Bootstrap dropdown.js as standalone?

Question

Is it possible to use the Bootstrap dropdown.js component without using the rest of the Bootstrap library? I've tried, but not managed to get it to work.

From the docs, I can see that the dropdown.js component requires Popper, and I can find the dropdown.js src file on GitHub.

But it seems that dropdown.js has a lot of dependencies:

import * as Popper from '@popperjs/core'

import {
  defineJQueryPlugin,
  getElement,
  getElementFromSelector,
  isDisabled,
  isElement,
  isVisible,
  isRTL,
  noop,
  getNextActiveElement,
  typeCheckConfig
} from './util/index'
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
import BaseComponent from './base-component'

And I'm not sure what to do about these. I've tried removing them, but I just get error messages that variables later on in the file are undefined.

Answer 1

You can use like this. Import Dropdown module and initialise it.

import { Dropdown } from "bootstrap";

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
    return new Dropdown(dropdownToggleEl)
})