Working on bootstrap menu components.

dropdown-button.js

@@ -0,0 +1,15 @@
+import { IgniteElement } from "../ignite-html/ignite-element.js";
+import { IgniteTemplate, button } from "../ignite-html/ignite-template.js";
+
+class DropdownButtonTemplate extends IgniteTemplate {
+    constructor(...children) {
+        super("button", children);
+
+        this.class("dropdown-item");
+        this.type("button");
+    }
+}
+
+export {
+    DropdownButtonTemplate as DropdownButton
+};

dropdown-menu.js

@@ -6,12 +6,34 @@ class DropdownMenu extends IgniteElement {
         super();
     }
 
+    get properties() {
+        return {
+            button: null,
+            buttonClass: "btn btn-simple",
+            placement: "right",
+            minWidth: null
+        };
+    }
+
+    get styles() {
+        return `
+            .btn-simple {
+                border: none;
+                background-color: transparent;
+            }
+        `;
+    }
+
     render() {
         return this.template.child(
-            new button().class("dropdown-toggle").attribute("data-toggle", "dropdown").child("menu click"),
-            new ul().class("dropdown-menu").child(
-                new slot(this)
-            )
+            new button().class(this.buttonClass).data("toggle", "dropdown").child(this.button),
+            new ul()
+                .class("dropdown-menu")
+                .class(this.placement, (value) => { return `dropdown-menu-${value}`; })
+                .style("min-width", this.minWidth, "important", (value) => { return value ? value : "unset"; })
+                .child(
+                    new slot(this)
+                )
         );
     }
 }

ignite-bootstrap.js

@@ -1,3 +1,7 @@
 import { DropdownMenu } from "./dropdown-menu.js";
+import { DropdownButton } from "./dropdown-button.js";
 
-export { DropdownMenu }
+export {
+    DropdownMenu,
+    DropdownButton
+}