A Leaflet plugin to show bootstrap dropdowns. Tested on desktop and mobile versions of Chrome, Edge, Firefox, and Safari.
- Demo Page: Leaflet 1 demo or Leaflet 2 demo
- Current Version: v1.0.4 / v2.0.0-alpha.1 (2026-02-28)
- Tested on desktop and mobile versions of Chrome, Edge, Firefox, and Safari.
Simply include the JS in the head.
<head>
...
<script src="dist/leaflet-bootstrap-dropdowns.min.js"></script>
...
</head>Then create a BootstrapDropdowns instance and add it to the map.
new L.Control.BootstrapDropdowns({
position: "topleft",
menuItems: [
{
html: 'Open Alert',
afterClick: () => alert("Hello!")
}
]
}).addTo(map);For Leaflet 2.x, use the ESM-ready version leaflet-bootstrap-dropdowns_v2.min.js.
import L from 'leaflet';
import BootstrapDropdowns from './dist/leaflet-bootstrap-dropdowns_v2.min.js';
new BootstrapDropdowns({
position: "topleft",
menuItems: [
{
html: 'Open Alert',
afterClick: () => alert("Hello!")
}
]
}).addTo(map);For more details, refer to the Leaflet 1 demo or Leaflet 2 demo.
| Option | Type | Default | Description |
|---|---|---|---|
| className | String | "" | the custom CSS class name assigned to the control |
| html | String | (SVG) | the HTML content of the button (defaults to a hamburger icon) |
| title | String | "menu" | the "title" attribute of the button |
| ariaLabel | String | "" | the "aria-label" attribute of the button. If empty, it defaults to title. |
| autoClose | Boolean/String | true | control the auto-close behavior (Bootstrap docs) |
| menuItems | Array | [] | the list of menu items to display |
Each object in the menuItems array can have the following properties:
| Property | Type | Description |
|---|---|---|
| html | String | the HTML content of the menu item |
| title | String | the "title" attribute of the menu item |
| ariaLabel | String | the "aria-label" attribute. If empty, it defaults to title. |
| separator | Boolean | if true, renders a horizontal divider |
| header | Boolean | if true, renders the item as a non-clickable header |
| current | Boolean | if true, marks the item as active and prevents navigation |
| disabled | Boolean | if true, renders the item as disabled |
| href | String | the URL for the link. If not provided, it defaults to # |
| target | String | the "target" attribute of the link (e.g., _blank) |
| rel | String | the "rel" attribute of the link |
| afterClick | Function | a callback function to execute when the item is clicked |
- Source Code: Github
- email: mfhsieh at gmail.com
- Github: Github