diff --git a/core/client/assets/sass/modules/dropdowns.scss b/core/client/assets/sass/modules/dropdowns.scss
new file mode 100644
index 0000000000..6982a0d45c
--- /dev/null
+++ b/core/client/assets/sass/modules/dropdowns.scss
@@ -0,0 +1,150 @@
+//
+// Dropdown Styles
+// --------------------------------------------------
+
+// Wrapper
+// Does nothing yet...
+.dropdown {}
+
+// List
+.dropdown-menu {
+    background: #fff;
+    box-shadow: rgba(0,0,0,0.5) 0 1px 15px;
+    display: inline-block;
+    border-radius: 2px;
+    padding: 0.5rem 0;
+    margin: 0;
+    position: relative;
+    font-size: 1.4rem;
+
+    // Dropdown Resets - This means we can use any element
+    li {
+        list-style: none;
+    }
+} // .dropdown-menu
+
+.dropdown-menu {
+
+    &[class*='triangle-'] {
+        &:before {
+            content: '';
+            position: absolute;
+            border-style: solid;
+            border-color: #fff transparent;
+            display: block;
+            width: 0;
+        } // :before
+
+        &:after {
+            content: '';
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: #fff;
+            transform: rotate(45deg);
+            box-shadow: rgba(0,0,0,0.1) 0 0 5px 5px;
+            z-index: -1;
+        } // :after
+    } // &[class*='triangle-']
+
+    // Bottom
+    &[class*='triangle-bottom'] {
+        &:before {
+            border-width: 10px 10px 0 10px;
+            bottom: -10px;
+        }
+        &:after {
+            bottom: -5px;
+        }
+    }
+    &.triangle-bottom {
+        &:before {
+            left: 50%;
+            margin-left: -10px;
+        }
+        &:after {
+            left: 50%;
+            margin-left: -10px;
+        }
+    } // &.triangle-bottom
+
+    // Top
+    &[class*='triangle-top'] {
+        &:before {
+            border-width: 0 10px 10px 10px;
+            top: -10px;
+        }
+        &:after {
+            top: -5px;
+        }
+    }
+    &.triangle-top {
+        &:before {
+            left: 50%;
+            margin-left: -10px;
+        }
+        &:after {
+            left: 50%;
+            margin-left: -10px;
+        }
+    } // &.triangle-top
+
+    // Top & Bottom Sides
+    &.triangle-top-left,
+    &.triangle-bottom-left {
+        &:before {
+            left: 2rem;
+        }
+        &:after {
+            left: 2rem;
+        }
+    } // &.triangle-bottom-left
+    &.triangle-top-right,
+    &.triangle-bottom-right {
+        &:before {
+            right: 2rem;
+        }
+        &:after {
+            right: 2rem;
+        }
+    } // &.triangle-bottom-right
+
+} // .dropdown-menu
+
+// List Item
+.dropdown-item {
+    color: #000;
+    display: block;
+    width: 100%;
+    padding: 0.7rem 3.5rem;
+
+    &:not(.divider):hover,
+    &:not(.divider):focus {
+        background: #f6f6f6;
+    }
+
+    &[class*='icon-'] {
+        position: relative;
+    }
+
+    &[class*='icon-']:before {
+        position: absolute;
+        left: 1.5rem;
+        font-size: 1.2rem;
+        line-height: 1.2;
+    }
+
+    &.divider {
+        position: relative;
+        height: 1.5rem;
+        &:before {
+            content: '';
+            position: absolute;
+            top: 0.7rem;
+            left: 0;
+            width: 100%;
+            height: 1px;
+            background: #eee;
+        } // :before
+    } // .divider
+} // .dropdown-item
\ No newline at end of file
diff --git a/core/client/assets/sass/screen.scss b/core/client/assets/sass/screen.scss
index 5547b110f5..1c71b1e8fa 100644
--- a/core/client/assets/sass/screen.scss
+++ b/core/client/assets/sass/screen.scss
@@ -21,6 +21,13 @@
 
 @import "patterns/global";
 
+
+// Modules - Re-usable elements
+// --------------------------------------------------
+
+@import "modules/dropdowns";
+
+
 //
 // Components - User interface objects
 // --------------------------------------------------
@@ -32,4 +39,4 @@
 // Layouts - Individual application screens
 // --------------------------------------------------
 
-@import "layouts/default";
\ No newline at end of file
+@import "layouts/default";
diff --git a/core/client/docs/_layouts/raw.html b/core/client/docs/_layouts/raw.html
new file mode 100644
index 0000000000..f1b57f13a7
--- /dev/null
+++ b/core/client/docs/_layouts/raw.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Meta, title, CSS, favicons, etc. -->
+    {% include head.html %}
+</head>
+<body>
+<a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>
+
+<!-- Docs page -->
+<main id="gh-main" role="main">
+    {{content}}
+</main>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/core/client/docs/dropdown.html b/core/client/docs/dropdown.html
new file mode 100644
index 0000000000..b17429d2d3
--- /dev/null
+++ b/core/client/docs/dropdown.html
@@ -0,0 +1,90 @@
+---
+layout: raw
+title: Ghost UI &middot; Making publishing beautiful.
+---
+
+<!--
+    .dropdown
+    This is used to show, hide and position the dropdown
+-->
+
+<h1>Default Dropdown</h1>
+
+<div class="dropdown">
+  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
+    <li role="presentation"><a class="dropdown-item icon-trash" role="menuitem" tabindex="-1" href="#">Another action</a></li>
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+    <li role="presentation">
+        <span class="dropdown-item divider"></span>
+    </li>
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+  </ul>
+</div>
+
+<hr>
+
+<h1>Bottom Triangle</h1>
+
+<div class="dropdown">
+  <ul class="dropdown-menu triangle-bottom" role="menu" aria-labelledby="dropdownMenu1">
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Another action</a></li>
+  </ul>
+</div>
+
+<h2>Bottom Left Triangle</h2>
+
+<div class="dropdown">
+  <ul class="dropdown-menu triangle-bottom-left" role="menu" aria-labelledby="dropdownMenu1">
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Another action</a></li>
+  </ul>
+</div>
+
+<h2>Bottom Right Triangle</h2>
+
+<div class="dropdown">
+  <ul class="dropdown-menu triangle-bottom-right" role="menu" aria-labelledby="dropdownMenu1">
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Another action</a></li>
+  </ul>
+</div>
+
+<hr>
+
+<h1>Top Triangle</h1>
+
+<div class="dropdown">
+  <ul class="dropdown-menu triangle-top" role="menu" aria-labelledby="dropdownMenu1">
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Another action</a></li>
+  </ul>
+</div>
+
+<h2>Top Left Triangle</h2>
+
+<div class="dropdown">
+  <ul class="dropdown-menu triangle-top-left" role="menu" aria-labelledby="dropdownMenu1">
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Another action</a></li>
+  </ul>
+</div>
+
+<h2>Top Right Triangle</h2>
+
+<div class="dropdown">
+  <ul class="dropdown-menu triangle-top-right" role="menu" aria-labelledby="dropdownMenu1">
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
+    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Another action</a></li>
+  </ul>
+</div>
+
+<h2>Div &amp; Button Markup</h2>
+
+<div class="dropdown">
+  <div class="dropdown-menu triangle-top-right" role="menu" aria-labelledby="dropdownMenu1">
+    <span role="presentation"><button class="dropdown-item" role="menuitem" tabindex="-1">Action</button></span>
+    <span role="presentation"><button class="dropdown-item" role="menuitem" tabindex="-1">Another action</button></span>
+  </div>
+</div>
\ No newline at end of file