diff --git a/openstack_dashboard/static/dashboard/scss/components/_context_selection.scss b/openstack_dashboard/static/dashboard/scss/components/_context_selection.scss
deleted file mode 100644
index 1f52e7c0c6..0000000000
--- a/openstack_dashboard/static/dashboard/scss/components/_context_selection.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.context-selection {
-  & > li > ul {
-    padding: 0;
-
-    & > li {
-      white-space: nowrap;
-
-      &.dropdown-header,
-      & > a {
-        padding: $dropdown-item-padding-vertical $dropdown-item-padding-horizontal $dropdown-item-padding-vertical $dropdown-item-padding-horizontal*1.5;
-      }
-
-      &.dropdown-header {
-        color: $brand-primary;
-      }
-
-      &:not(.dropdown-header):hover {
-        background-color: $dropdown-link-hover-bg;
-        cursor: pointer;
-      }
-
-      & > a {
-        position: relative;
-        color: $dropdown-link-color;
-        text-decoration: none;
-        display: inline-block;
-        width: 100%;
-
-        & > .fa.fa-check {
-          float: left;
-          position: absolute;
-          left: $dropdown-item-padding-horizontal/2;
-          line-height: $line-height-computed;
-        }
-      }
-    }
-  }
-
-  .disabled {
-    cursor: not-allowed;
-    color: $dropdown-link-disabled-color;
-  }
-}
-
-.context-delimiter {
-  font-size: $padding-small-vertical;
-  vertical-align: middle;
-  padding-right: $padding-small-vertical;
-  padding-left: $padding-small-vertical;
-}
-
diff --git a/openstack_dashboard/static/dashboard/scss/components/_navbar.scss b/openstack_dashboard/static/dashboard/scss/components/_navbar.scss
index ee36b789bb..c9c2e7ead7 100644
--- a/openstack_dashboard/static/dashboard/scss/components/_navbar.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_navbar.scss
@@ -32,3 +32,9 @@
   }
 }
 
+.context-delimiter {
+  font-size: $padding-small-vertical;
+  vertical-align: middle;
+  padding-right: $padding-small-vertical;
+  padding-left: $padding-small-vertical;
+}
diff --git a/openstack_dashboard/static/dashboard/scss/components/_selection_menu.scss b/openstack_dashboard/static/dashboard/scss/components/_selection_menu.scss
new file mode 100644
index 0000000000..43ef7ccbb2
--- /dev/null
+++ b/openstack_dashboard/static/dashboard/scss/components/_selection_menu.scss
@@ -0,0 +1,52 @@
+// FYI Note (hurgleburgler)
+// The Selection Menu is not a normal drop down element
+//   This menu can contain other dropdown menus, and will
+//   treat them as a selection group element.
+//   The context menu shows this functionality.
+//   This drop down is composed of other <ul> drop down lists.
+//   Because of this fact, it is necessary to inherit
+//   class="dropdown" for the children elements to obtain
+//   their necessary styles, but we must remove the default
+//   styles for .dropdown on the inner <ul> itself.
+
+.selection-menu {
+
+  // Pass along the style of a disabled anchor
+  .disabled {
+    cursor: not-allowed;
+    color: $dropdown-link-disabled-color;
+  }
+
+  // Remove all styles from an inside dropdown
+  .dropdown-menu {
+    border: medium none;
+    box-shadow: none;
+    display: block;
+    position: relative;
+    float: none;
+
+    // Remove any possible arrows on the dropdown box
+    &:before,
+    &:after {
+      border: none;
+      position: relative;
+    }
+
+    // Pad the icon with 2 * icon size
+    & > li > a {
+      padding-left: 2em;
+    }
+  }
+
+  // Hide the icon by default if its not selected
+  .dropdown-selected-icon {
+    display: none;
+  }
+
+  .dropdown-selected .dropdown-selected-icon {
+    display: inline;
+    position: absolute;
+    left: .5em;
+    line-height: $line-height-computed;
+  }
+}
diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss
index 92b26483f5..0766f4cb7d 100644
--- a/openstack_dashboard/static/dashboard/scss/horizon.scss
+++ b/openstack_dashboard/static/dashboard/scss/horizon.scss
@@ -20,7 +20,6 @@
 // Dashboard Components
 @import "components/bar_charts";
 @import "components/charts";
-@import "components/context_selection";
 @import "components/datepicker";
 @import "components/forms";
 @import "components/inline_edit";
@@ -35,6 +34,7 @@
 @import "components/quota";
 @import "components/resource_browser";
 @import "components/resource_topology";
+@import "components/selection_menu";
 @import "components/sidebar";
 @import "components/table_actions";
 @import "components/tables";
diff --git a/openstack_dashboard/templates/context_selection/_domain_list.html b/openstack_dashboard/templates/context_selection/_domain_list.html
index 1e01e5ce00..e7576b0c2a 100644
--- a/openstack_dashboard/templates/context_selection/_domain_list.html
+++ b/openstack_dashboard/templates/context_selection/_domain_list.html
@@ -1,11 +1,13 @@
 {% load i18n %}
 
-<ul>
+<ul class="dropdown-menu">
   <li class="dropdown-header">{% trans "Domains:" %}</li>
   <li>
-    <a class="disabled">
-      {{ domain_name }}
-      <span class="fa fa-check"></span>
+    <a class="disabled dropdown-selected">
+      <span class="fa fa-check dropdown-selected-icon"></span>
+      <span class="dropdown-title">
+        {{ domain_name }}
+      </span>
     </a>
   </li>
 </ul>
diff --git a/openstack_dashboard/templates/context_selection/_project_list.html b/openstack_dashboard/templates/context_selection/_project_list.html
index 1b5ed9a274..25c2eab199 100644
--- a/openstack_dashboard/templates/context_selection/_project_list.html
+++ b/openstack_dashboard/templates/context_selection/_project_list.html
@@ -1,15 +1,17 @@
 {% load i18n %}
 
 {% with dashboard_url=request.horizon.dashboard.get_absolute_url %}
-<ul>
+<ul class="dropdown-menu">
   <li class="dropdown-header">{% trans "Projects:" %}</li>
   {% for project in projects %}
   <li>
-    <a href="{% url 'switch_tenants' project.id %}?next={{ dashboard_url }}" target="_self">
-      {{ project.name }}
-      {% if project.enabled and project.id == project_id %}
-      <span class="fa fa-check"></span>
-      {% endif %}
+    <a class="{% if project.enabled and project.id == project_id %} dropdown-selected{% endif %}"
+       href="{% url 'switch_tenants' project.id %}?next={{ dashboard_url }}"
+       target="_self">
+      <span class="fa fa-check dropdown-selected-icon"></span>
+      <span class="dropdown-title">
+        {{ project.name }}
+      </span>
     </a>
   </li>
   {% endfor %}
diff --git a/openstack_dashboard/templates/context_selection/_region_list.html b/openstack_dashboard/templates/context_selection/_region_list.html
index 22c0acefe3..5b58a3e948 100644
--- a/openstack_dashboard/templates/context_selection/_region_list.html
+++ b/openstack_dashboard/templates/context_selection/_region_list.html
@@ -1,12 +1,12 @@
 {% load i18n %}
 
 {% with panel_url=request.horizon.panel.get_absolute_url %}
-<ul>
+<ul class="dropdown-menu">
   <li class="dropdown-header">{% trans "Regions:" %}</li>
   {% for region in regions %}
   <li>
     <a href="{% url 'switch_services_region' region %}?next={{ panel_url }}" target="_self">
-      <span class="region-name">{{ region }}</span>
+      <span class="region-name dropdown-title">{{ region }}</span>
       {% if region == region_name %}
       <span class="fa fa-check"></span>
       {% endif %}
diff --git a/openstack_dashboard/templates/header/_context_selection.html b/openstack_dashboard/templates/header/_context_selection.html
index 4cee9aa2d1..6420003db8 100644
--- a/openstack_dashboard/templates/header/_context_selection.html
+++ b/openstack_dashboard/templates/header/_context_selection.html
@@ -9,7 +9,7 @@
       {% show_overview %}
       <span class="fa fa-caret-down"></span>
     </a>
-    <ul class="dropdown-menu context-selection">
+    <ul class="dropdown-menu context-selection selection-menu">
 
       {% comment %}
       is_multidomain is only available through an assignment tag pulled in through context_selection
diff --git a/openstack_dashboard/themes/default/horizon/_styles.scss b/openstack_dashboard/themes/default/horizon/_styles.scss
index f45c39e2ab..142f493f7b 100644
--- a/openstack_dashboard/themes/default/horizon/_styles.scss
+++ b/openstack_dashboard/themes/default/horizon/_styles.scss
@@ -3,6 +3,7 @@
 @import "components/breadcrumb_header";
 @import "components/context_selection";
 @import "components/messages";
+@import "components/navbar";
 @import "components/pie_charts";
 @import "components/quota";
 @import "components/sidebar";
diff --git a/openstack_dashboard/themes/default/horizon/components/_context_selection.scss b/openstack_dashboard/themes/default/horizon/components/_context_selection.scss
index a33c3e9743..798fd23f2d 100644
--- a/openstack_dashboard/themes/default/horizon/components/_context_selection.scss
+++ b/openstack_dashboard/themes/default/horizon/components/_context_selection.scss
@@ -1,44 +1,36 @@
 //Keep the native bootstrap experience for smaller screens
 @media(min-width: $screen-sm) {
 
-  .context-selection {
-    width: auto;
+  // Specificity required
+  .context-selection.dropdown-menu {
     padding: 0;
 
     & > li {
       display: table-cell;
+      vertical-align: top;
       padding: $padding-xs-horizontal 0;
 
-      & > ul > li {
-
-        &.dropdown-header,
-        & > a {
-          padding: $dropdown-item-padding-vertical $dropdown-item-padding-horizontal*2 $dropdown-item-padding-vertical $dropdown-item-padding-horizontal;
-        }
-
-        &.dropdown-header {
-          color: $dropdown-header-color;
-        }
-
-        & > a  {
-          display: inline-block;
-          width: 100%;
-
-          & > .fa.fa-check {
-            left: auto;
-            float: auto;
-            padding-left: $dropdown-item-padding-horizontal/2;
-          }
-        }
-      }
-
       &:not(:last-child) {
         border-right: 1px solid $gray-light;
       }
     }
+
+    .dropdown-menu > li > a {
+      padding-left: $dropdown-item-padding-horizontal;
+      display: flex;
+    }
+
+    .dropdown-title {
+     order: 1;
+    }
+
+    .dropdown-selected-icon {
+      position: relative;
+      order: 2;
+    }
   }
 
-  .open .context-selection {
+  .open .dropdown-selection {
     display: table;
 
     // display: table pushes down our little arrow a single pixel
diff --git a/openstack_dashboard/themes/default/horizon/components/_navbar.scss b/openstack_dashboard/themes/default/horizon/components/_navbar.scss
new file mode 100644
index 0000000000..ea2d2140f0
--- /dev/null
+++ b/openstack_dashboard/themes/default/horizon/components/_navbar.scss
@@ -0,0 +1,3 @@
+.context-delimiter {
+  font-size: $context-delimiter-size;
+}
\ No newline at end of file
diff --git a/openstack_dashboard/themes/material/static/horizon/_icons.scss b/openstack_dashboard/themes/material/static/horizon/_icons.scss
index b77fc40ddc..cf22210bbe 100644
--- a/openstack_dashboard/themes/material/static/horizon/_icons.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_icons.scss
@@ -8,7 +8,7 @@ $mdi-font-path: $static_url + "/horizon/lib/mdi/fonts";
 
 .fa {
   @extend .mdi;
-  font-size: 1.3em;
+  font-size: $mdi-icon-size;
 }
 
 $icon-swap: (
diff --git a/openstack_dashboard/themes/material/static/horizon/_styles.scss b/openstack_dashboard/themes/material/static/horizon/_styles.scss
index 52ef8cb83b..27821691cc 100644
--- a/openstack_dashboard/themes/material/static/horizon/_styles.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_styles.scss
@@ -3,6 +3,8 @@
 @import "components/messages";
 @import "components/hamburger";
 @import "components/magic_search";
+@import "components/navbar";
+@import "components/selection_menu";
 @import "components/sidebar";
 
 .login .splash-logo {
diff --git a/openstack_dashboard/themes/material/static/horizon/_variables.scss b/openstack_dashboard/themes/material/static/horizon/_variables.scss
index 32d923263f..4f7132350e 100644
--- a/openstack_dashboard/themes/material/static/horizon/_variables.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_variables.scss
@@ -3,3 +3,5 @@ $hamburger-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
 $sidebar-animation: $hamburger-transition;
 
 $alert-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
+
+$mdi-icon-size: 1.3em;
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_navbar.scss b/openstack_dashboard/themes/material/static/horizon/components/_navbar.scss
new file mode 100644
index 0000000000..d94cfd16c9
--- /dev/null
+++ b/openstack_dashboard/themes/material/static/horizon/components/_navbar.scss
@@ -0,0 +1,5 @@
+.context-delimiter {
+  @extend .mdi-stop;
+  color: $gray-light;
+  font-size: $font-size-small;
+}
\ No newline at end of file
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_selection_menu.scss b/openstack_dashboard/themes/material/static/horizon/components/_selection_menu.scss
new file mode 100644
index 0000000000..bb5a2f3e2d
--- /dev/null
+++ b/openstack_dashboard/themes/material/static/horizon/components/_selection_menu.scss
@@ -0,0 +1,16 @@
+.selection-menu {
+  .dropdown-menu > li > a {
+    padding-left: $mdi-icon-size*2;
+  }
+
+  .dropdown-selected {
+    .dropdown-selected-icon {
+      left: $mdi-icon-size/4;
+
+      @media (min-width: $screen-sm) {
+        color: $brand-primary;
+        left: $mdi-icon-size/2;
+      }
+    }
+  }
+}