diff --git a/addons/rose/addon/styles/rose/components/_dropdown.scss b/addons/rose/addon/styles/rose/components/_dropdown.scss
index 58eac5a0a..13e19785b 100644
--- a/addons/rose/addon/styles/rose/components/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/_dropdown.scss
@@ -86,7 +86,7 @@
     z-index: 99;
   }
 
-  &.dropdown-right {
+  &.rose-dropdown-right {
     .rose-dropdown-content {
       right: 0;
     }
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index 8d2b75734..00ab21e62 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown.hbs
@@ -1,6 +1,6 @@
 <details
   ...attributes
-  class="rose-dropdown {{if @alignRight " dropdown-right"}} {{if  @style (concat "rose-dropdown-" @style)}}"
+  class="rose-dropdown {{if @alignRight " rose-dropdown-right"}} {{if  @style (concat "rose-dropdown-" @style)}}"
   {{on-click-outside this.close}}
 >
 
diff --git a/addons/rose/tests/integration/components/rose/dropdown-test.js b/addons/rose/tests/integration/components/rose/dropdown-test.js
index 3d4597c95..03c1b65e7 100644
--- a/addons/rose/tests/integration/components/rose/dropdown-test.js
+++ b/addons/rose/tests/integration/components/rose/dropdown-test.js
@@ -9,6 +9,7 @@ module('Integration | Component | rose/dropdown', function (hooks) {
   test('it renders', async function (assert) {
     await render(hbs`<Rose::Dropdown />`);
     assert.ok(find('.rose-dropdown'));
+    assert.notOk(find('.rose-dropdown-right'));
   });
 
   test('it renders with html attributes', async function (assert) {
@@ -32,6 +33,13 @@ module('Integration | Component | rose/dropdown', function (hooks) {
     assert.ok(find('.has-icon-only'));
   });
 
+  test('it supports right aligned content', async function (assert) {
+    await render(hbs`
+      <Rose::Dropdown @alignRight={{true}} />
+    `);
+    assert.ok(find('.rose-dropdown-right'));
+  });
+
   test('it renders with content', async function (assert) {
     await render(hbs`<Rose::Dropdown @text="Click me" as |dropdown|>
       <dropdown.link @route="about"/>
diff --git a/addons/rose/tests/integration/components/rose/header/utilities-test.js b/addons/rose/tests/integration/components/rose/header/utilities-test.js
index ba8de3f93..1bb44de8e 100644
--- a/addons/rose/tests/integration/components/rose/header/utilities-test.js
+++ b/addons/rose/tests/integration/components/rose/header/utilities-test.js
@@ -18,4 +18,11 @@ module('Integration | Component | rose/header/utilities', function (hooks) {
     </Rose::Header::Utilities>`);
     assert.equal(findAll('.rose-dropdown').length, 2);
   });
+
+  test('it renders nav dropdown elements as right aligned', async function (assert) {
+    await render(hbs`<Rose::Header::Utilities as |nav| >
+      <nav.dropdown />
+    </Rose::Header::Utilities>`);
+    assert.ok(find('.rose-dropdown.rose-dropdown-right'));
+  });
 });