diff --git a/assets/icons/dropdown.svg b/assets/icons/dropdown.svg
index e49854a3f..8acced3d2 100755
--- a/assets/icons/dropdown.svg
+++ b/assets/icons/dropdown.svg
@@ -1,3 +1,3 @@
diff --git a/components/_dropdowns.scss b/components/_dropdowns.scss
new file mode 100644
index 000000000..aab41b02f
--- /dev/null
+++ b/components/_dropdowns.scss
@@ -0,0 +1,38 @@
+$dropdown-content-z-index: 1;
+
+.wds-dropdown {
+ display: inline-block;
+ position: relative;
+
+ &.wds-is-active {
+ .wds-dropdown-content {
+ display: inline-block;
+ }
+
+ .wds-dropdown-toggle-chevron {
+ transform: rotate(180deg);
+ }
+ }
+}
+
+.wds-dropdown-toggle {
+ position: relative;
+ // dropdown content has shadow that should be hidden below the toggle
+ z-index: $dropdown-content-z-index + 1;
+}
+
+.wds-dropdown-content {
+ background-color: $color-white;
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
+ display: none;
+ position: absolute;
+ z-index: $dropdown-content-z-index;
+
+ &.wds-is-dark {
+ box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
+ }
+
+ &.wds-is-right-aligned {
+ right: 0;
+ }
+}
diff --git a/components/index.scss b/components/index.scss
index 1590ff0dc..486b02f16 100644
--- a/components/index.scss
+++ b/components/index.scss
@@ -1 +1,2 @@
+@import 'dropdowns';
@import 'global-footer';
diff --git a/dist/svg/sprite-icons.svg b/dist/svg/sprite-icons.svg
index 7017355c0..739f2e204 100644
--- a/dist/svg/sprite-icons.svg
+++ b/dist/svg/sprite-icons.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/dist/svg/wds-icons-dropdown.svg b/dist/svg/wds-icons-dropdown.svg
index c17024e89..76f54ec70 100755
--- a/dist/svg/wds-icons-dropdown.svg
+++ b/dist/svg/wds-icons-dropdown.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file