diff --git a/addon/components/es-navbar.js b/addon/components/es-navbar.js
index d7d591cf..e6ad5fea 100644
--- a/addon/components/es-navbar.js
+++ b/addon/components/es-navbar.js
@@ -20,8 +20,7 @@ export default class EsNavbar extends Component {
   }
 
   toggleMenu() {
-    let menu = this.element.querySelector('ul[role="menubar"]');
-
+    let menu = this.element.querySelector('.navbar-toggler');
     menu.setAttribute('aria-expanded', menu.getAttribute('aria-expanded') !== 'true');
   }
 }
diff --git a/addon/components/es-navbar/link/component.js b/addon/components/es-navbar/link/component.js
index 57c4abfb..07bca943 100644
--- a/addon/components/es-navbar/link/component.js
+++ b/addon/components/es-navbar/link/component.js
@@ -3,242 +3,104 @@ import layout from './template';
 import { computed } from '@ember/object';
 import { equal } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
-import { next } from '@ember/runloop';
+import { schedule, next } from '@ember/runloop';
 
 export default Component.extend({
   layout,
   tagName: 'li',
-  tabIndex: 0,
-
-  role: 'menuitem',
-
-  attributeBindings: ['role'],
+  classNames: ['navbar-list-item'],
   classNameBindings: ['isDropdown:dropdown'],
   isDropdown: equal('link.type', 'dropdown'),
+  isDropdownOpen: false,
 
-  keyCode: Object.freeze({
-    'TAB': 9,
-    'RETURN': 13,
-    'ESC': 27,
-    'SPACE': 32,
-    'PAGEUP': 33,
-    'PAGEDOWN': 34,
-    'END': 35,
-    'HOME': 36,
-    'LEFT': 37,
-    'UP': 38,
-    'RIGHT': 39,
-    'DOWN': 40
+  // because aria-expanded requires a string value instead of a boolean
+  isExpanded: computed('isDropdownOpen', function() {
+    return this.isDropdownOpen ? 'true' : 'false';
   }),
 
   navbar: service(),
 
-  didInsertElement() {
-    this.element.tabIndex = -1;
-
-    this.get('navbar').register(this);
-    this.domNode = this.element.querySelector('ul[role="menu"]');
+  actions: {
+    toggleDropdown() {
+      this.toggleProperty('isDropdownOpen');
 
-    if(this.domNode) {
-      this.element.querySelector('a').onmousedown = () => this.expand();
-      let links = Array.from(this.domNode.querySelectorAll('a'))
+      if (this.isDropdownOpen) {
+        // if it's open, let's make sure it can do some things
+        schedule('afterRender', this, function() {
 
-      links.forEach((ancor) => {
-        ancor.addEventListener('blur', () => this.handleBlur());
-      });
+          // move focus to the first item in the dropdown
+          this.processFirstElementFocus();
+          this.processKeyPress();
+        });
+      }
     }
   },
 
-  handleBlur() {
-    next(this, function() {
-      let subItems = Array.from(this.element.querySelectorAll('ul[role="menu"] li'));
-      let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
-
-      // debugger
-      if(!focused) {
-        this.closePopupMenu();
-      }
-    })
+  closeDropdown() {
+    // set the isDropdownOpen to false, which will make the dropdown go away
+    this.set('isDropdownOpen', false);
   },
 
-  openPopupMenu() {
-    // Get position and bounding rectangle of controller object's DOM node
-    var rect = this.element.getBoundingClientRect();
-
-    // Set CSS properties
-    if(this.domNode) {
-      this.domNode.style.display = 'block';
-      this.domNode.style.top = rect.height + 'px';
-      this.domNode.style.zIndex = 1000;
-    }
-
-    this.set('expanded', true);
+  openDropdown() { //might not need this
+    // open the dropdown and set the focus to the first item inside
+    this.set('isDropdownOpen', true);
+    this.processFirstElementFocus();
   },
 
-  closePopupMenu(force) {
-    var controllerHasHover = this.hasHover;
-
-    var hasFocus = this.hasFocus;
-
-    if (!this.isMenubarItem) {
-      controllerHasHover = false;
-    }
+  processBlur() {
+    next(this, function() {
+      let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list li'));
+      let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
 
-    if (force || (!hasFocus && !this.hasHover && !controllerHasHover)) {
-      if(this.domNode) {
-        this.domNode.style.display = 'none';
-        this.domNode.style.zIndex = 0;
+      //if the dropdown isn't focused, close it
+      if (!focused) {
+        this.closeDropdown();
       }
-      this.set('expanded', false);
-    }
-  },
-
-  expanded: computed({
-    get() {
-      return this.element.getAttribute('aria-expanded') === 'true';
-    },
-    set(key, value) {
-      this.element.setAttribute('aria-expanded', value);
-    }
-  }).volatile(),
-
-  setFocusToFirstItem() {
-    let element = this.element.querySelector('ul[role="menu"] li a')
-    if (element) {
-      element.focus();
-    }
+    });
   },
 
-  setFocusToLastItem() {
-    this.element.querySelector('ul[role="menu"] li a:last-of-type').focus();
+  processClick() {
+    // TODO handle mouseclick outside the current dropdown
   },
 
-  setFocusToNextItem() {
-    let subItems = Array.from(this.element.querySelectorAll('ul[role="menu"] li'));
-
-    let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
-    let focusedIndex = subItems.indexOf(focused);
-
-    let nextItem = subItems[(focusedIndex + 1) % subItems.length];
-
-    if (!nextItem) {
-      return;
-    }
-
-    nextItem.querySelector('a').focus();
+  processFirstElementFocus() {
+    // Identify the first item in the dropdown list & set focus on it
+    let firstFocusable = this.element.querySelector('.navbar-dropdown-list li:first-of-type a');
+    firstFocusable.focus();
   },
 
-  setFocusToPreviousItem() {
-    let subItems = Array.from(this.element.querySelectorAll('ul[role="menu"] li'));
-
-    let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
-    let focusedIndex = subItems.indexOf(focused);
+  processKeyPress() {
+    // add event listeners
+    let dropdownList = this.element.querySelector('.navbar-dropdown-list');
 
-    let nextIndex = focusedIndex - 1;
+    //...for certain keypress events
+    dropdownList.addEventListener('keydown', event => {
 
-    if (nextIndex < 0) {
-      nextIndex = subItems.length - 1;
-    }
+      // ESC key should close the dropdown and return focus to the toggle
+      if (event.keyCode === 27 && this.isDropdownOpen) {
+        this.closeDropdown();
+        this.returnFocus();
 
-    let nextItem = subItems[nextIndex];
-
-    if (!nextItem) {
-      return;
-    }
+      // if focus leaves the open dropdown via keypress, close it (without trying to otherwise control focus)
+      } else if (this.isDropdownOpen) {
+          this.processBlur();
 
-    nextItem.querySelector('a').focus();
+      } else {
+          return;
+      }
+    });
   },
 
-  keyDown(event) {
-    let flag = false;
-    let clickEvent;
-    let mousedownEvent;
-
-    switch (event.keyCode) {
-      case this.keyCode.RETURN:
-      case this.keyCode.SPACE:
-        // Create simulated mouse event to mimic the behavior of ATs
-        // and let the event handler handleClick do the housekeeping.
-        mousedownEvent = new MouseEvent('mousedown', {
-          'view': window,
-          'bubbles': true,
-          'cancelable': true
-        });
-        clickEvent = new MouseEvent('click', {
-          'view': window,
-          'bubbles': true,
-          'cancelable': true
-        });
-
-        document.activeElement.dispatchEvent(mousedownEvent);
-        document.activeElement.dispatchEvent(clickEvent);
-
-        flag = true;
-        break;
-      case this.keyCode.DOWN:
-        if(this.get('expanded')) {
-          this.setFocusToNextItem();
-        } else {
-          this.openPopupMenu();
-          this.setFocusToFirstItem();
-        }
-        flag = true;
-        break;
-
-      case this.keyCode.LEFT:
-        this.get('navbar').setFocusToPreviousItem(this);
-        flag = true;
-        break;
-
-      case this.keyCode.RIGHT:
-        this.get('navbar').setFocusToNextItem(this);
-        flag = true;
-        break;
-
-      case this.keyCode.UP:
-        if(this.get('expanded')) {
-          this.setFocusToPreviousItem();
-        } else {
-          this.openPopupMenu();
-          this.setFocusToLastItem();
-        }
-        break;
-
-      case this.keyCode.HOME:
-      case this.keyCode.PAGEUP:
-        this.setFocusToFirstItem();
-        flag = true;
-        break;
-
-      case this.keyCode.END:
-      case this.keyCode.PAGEDOWN:
-        this.setFocusToLastItem();
-        flag = true;
-        break;
-
-      case this.keyCode.TAB:
-        this.closePopupMenu(true);
-        break;
-
-      case this.keyCode.ESC:
-        this.closePopupMenu(true);
-        break;
-    }
-
-    if (flag) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
+  returnFocus() {
+    // after that rendering bit happens, we need to return the focus to the trigger
+    schedule('afterRender', this, function() {
+      let dropdownTrigger = this.element.querySelector('.navbar-list-item-dropdown-toggle');
+      dropdownTrigger.focus();
+    });
   },
 
-  expand() {
-    next(this, () => {
-      if(this.get('expanded')) {
-        this.closePopupMenu();
-      } else {
-        this.openPopupMenu();
-        this.setFocusToFirstItem();
-      }
-    })
+  willDestroyElement() {
+    document.removeEventListener('keydown', this.triggerDropdown);
+    // document.removeEventListener('click', this.triggerDropdown);
   }
 });
diff --git a/addon/components/es-navbar/link/template.hbs b/addon/components/es-navbar/link/template.hbs
index fb7f6f1e..ad5bcb7e 100644
--- a/addon/components/es-navbar/link/template.hbs
+++ b/addon/components/es-navbar/link/template.hbs
@@ -1,40 +1,36 @@
 {{#if (eq link.type "link")}}
   <a
-    class="navbar-link__dropdown"
-    aria-haspopup="true"
-    aria-expanded="false"
+    class="navbar-list-item-link"
     href={{link.href}}
-    tabindex={{if (eq index 0) 0 -1}}
   >
     {{link.name}}
   </a>
 {{/if}}
 {{#if (eq link.type "dropdown")}}
-  <a
-    class="navbar-link__dropdown"
-    aria-haspopup="true"
-    aria-expanded="false"
-    href="javascript:void(0)"
-    tabindex={{if (eq index 0) 0 -1}}
+  <button
+    onclick={{action "toggleDropdown"}}
+    class="navbar-list-item-dropdown-toggle {{if isDropdownOpen "active"}}"
+    aria-expanded={{isExpanded}}
   >
     {{link.name}}
-  </a>
-  <ul class="dropdown" role="menu" aria-label={{link.name}}>
-    {{#each link.items as |item|}}
-      {{#if (eq item.type "link")}}
-        <li role="none">
-          <a
-            class="navbar-link__dropdown-item"
-            href={{item.href}}
-            tabindex="-1"
-          >
-            {{item.name}}
-          </a>
-        </li>
-      {{/if}}
-      {{#if (eq item.type "divider")}}
-        <hr>
-      {{/if}}
-    {{/each}}
-  </ul>
+  </button>
+  {{#if isDropdownOpen}}
+    <ul class="navbar-dropdown-list">
+      {{#each link.items as |item|}}
+        {{#if (eq item.type "link")}}
+          <li class="navbar-dropdown-list-item">
+            <a
+              class="navbar-dropdown-list-item-link"
+              href={{item.href}}
+            >
+              {{item.name}}
+            </a>
+          </li>
+        {{/if}}
+        {{#if (eq item.type "divider")}}
+          <li role="separator" class="separator"></li>
+        {{/if}}
+      {{/each}}
+    </ul>
+  {{/if}}
 {{/if}}
diff --git a/addon/styles/components/es-navbar.css b/addon/styles/components/es-navbar.css
index 8a186529..1b887f64 100644
--- a/addon/styles/components/es-navbar.css
+++ b/addon/styles/components/es-navbar.css
@@ -1,23 +1,29 @@
-nav.es-navbar {
-  width: 100%;
-  max-width: var(--container-width-large);
-  padding: 1rem;
-  font-size: var(--text-preset-2);
+.es-navbar {
+  background-color: #1C1E23;
+  color: white;
   display: flex;
   flex-direction: column;
+  /* font-size: var(--text-preset-2); */
+  font-size: 1.2em;
+  font-weight: 500;
+  max-width: var(--container-width-large);
+  padding: 0.5rem;
+  width: 100%;
 }
 
 .navbar-brand {
   display: block;
-  padding: 0 2rem;
-  height: 6rem;
+  padding: 0 1rem;
+  height: 3rem;
+  /* TODO using order is not ideal for accessibility */
   order: 2;
 }
 
-.navbar-nav {
+.navbar-list {
   padding: 0;
   width: 100%;
-  margin: 1rem 0 0 0;
+  margin: 0.5rem 0 0 0;
+  /* TODO using order is not ideal for accessibility */
   order: 3;
 }
 
@@ -27,9 +33,10 @@ nav.es-navbar {
   border-radius: 4px;
   border-color: var(--color-light);
   margin-left: auto;
+  /* TODO using order is not ideal for accessibility */
   order: 1;
-  margin-bottom: -6rem;
-  height: 6rem;
+  margin-bottom: -3rem;
+  height: 3rem;
 }
 
 .navbar-toggler .navbar-toggler-icon {
@@ -37,108 +44,129 @@ nav.es-navbar {
 }
 
 .navbar-toggler-icon {
-  display: block;
-  width: 5rem;
-  height: 3rem;
-  vertical-align: middle;
-  content: "";
-  background: center center no-repeat;
   background-size: 100% 100%;
+  background: center center no-repeat;
+  content: "";
+  display: block;
+  height: 1.5rem;
+  width: 2.5rem;
 }
 
-.navbar-nav >li {
+.navbar-list-item {
   list-style: none;
   position: relative;
 }
 
-.navbar-link__dropdown {
-  display: block;
-  padding: 2rem;
-  line-height: 2rem;
+.navbar-list-item-link {
+  color: inherit;
+  padding: 1rem;
   text-decoration: none;
-  color: #FFF;
-  white-space: nowrap;
-  font-weight: 600;
-}
-
-.dropdown .navbar-link__dropdown::after {
-  content: '';
-  display: inline-block;
-  width: 0;
-  height: 0;
-  vertical-align: middle;
-  margin-left: 1rem;
-  border-top: 5px dashed;
-  border-top: 5px solid var(--color-orange);
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-}
-
-li[aria-expanded=true] .navbar-link__dropdown {
-  background: #FFFFFF;
-  color: var(--color-orange);
-}
-
-ul[role="menu"] {
-  display: none;
-  padding: 0;
-  background: #FFFFFF;
-  box-shadow: 5px 5px 5px 0 rgba(50,50,50,0.2);
-}
-
-ul[role="menu"] hr {
-  margin: 0;
 }
 
-ul[role="menu"] li {
-  list-style: none;
+.navbar-list-item-dropdown-toggle {
+  background-color: transparent;
+  border-color: transparent;
+  color: #FFF;
   display: block;
+  padding: 1rem;
+  text-decoration: none;
   white-space: nowrap;
-  background: #FFF;
 }
 
-ul[role="menu"] li> a {
-  padding: 2rem;
-  font-weight: 600;
-  display: block;
-  text-decoration: none;
-  color: var(--color-orange);
+.navbar-list-item-dropdown-toggle:hover {
+  cursor: pointer;
 }
 
-ul[role="menu"] li> a:hover, ul[role="menu"] li> a:focus {
-  background: var(--color-orange);
-  color: var(--color-light);
-}
+  .navbar-list-item-dropdown-toggle::after {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px dashed;
+    border-top: 5px solid white;
+    content: '';
+    display: inline-block;
+    height: 0;
+    margin-left: 0.5rem;
+    vertical-align: middle;
+    width: 0;
+  }
 
+  .navbar-list-item-dropdown-toggle[aria-expanded="true"] {
+    color: var(--color-ember-orange);
+  }
+  .navbar-list-item-dropdown-toggle[aria-expanded="true"]:after {
+    border-top-color: var(--color-ember-orange);
+  }
 
-ul[role="menubar"][aria-expanded="true"] li{
-  background: blue;
-}
 
-@media (min-width: 992px) {
-  nav.es-navbar {
-    display: flex;
-    flex-direction: row;
-  }
-  .navbar-brand {
+  .navbar-dropdown-list {
+    background: #FFFFFF;
+    box-shadow: 5px 5px 5px 0 rgba(50, 50, 50, 0.2);
     padding: 0;
-    order: 1;
   }
-  .navbar-nav {
-    order: 2;
-    margin: 0 2rem;
-    padding: 0;
-    display: flex;
-    align-items: center;
+
+  li.separator {
+    margin: 0;
+    /* TODO fix this */
+    border-bottom: 1px solid black;
   }
-  .navbar-toggler {
-    order: 3;
+
+  .navbar-dropdown-list-item {
+    background: #FFF;
+    display: block;
+    list-style: none;
+    white-space: nowrap;
   }
-  ul[role="menu"] {
-    display: none;
-    position: absolute;
-    padding: 0;
-    background: #FFFFFF;
-    box-shadow: 5px 5px 5px 0 rgba(50,50,50,0.2);
+
+  .navbar-dropdown-list-item-link {
+    color: var(--color-ember-orange);
+    display: block;
+    padding: 1rem;
+    text-decoration: none;
+  }
+
+  .navbar-dropdown-list-item-link:hover,
+  .navbar-dropdown-list-item-link:focus {
+    background: var(--color-ember-orange);
+    color: var(--color-light);
   }
-}
\ No newline at end of file
+
+
+  /* TODO This rule doesn't make sense so I'm commenting it out for now
+ul[role="menubar"][aria-expanded="true"] li {
+  background: blue;
+} */
+
+  @media (min-width: 992px) {
+    nav.es-navbar {
+      display: flex;
+      flex-direction: row;
+      padding: 0;
+    }
+
+    .navbar-brand {
+      padding: 0;
+      /* TODO using order is not ideal for accessibility */
+      order: 1;
+    }
+
+    .navbar-list {
+      /* TODO using order is not ideal for accessibility */
+      order: 2;
+      align-items: center;
+      display: flex;
+      margin: 0 1rem;
+      padding: 0;
+    }
+
+    .navbar-toggler {
+      display: none; /* TODO remove this properly or else screen readers will still pick up on it */
+    }
+
+    .navbar-dropdown-list {
+      background: #FFFFFF;
+      box-shadow: 5px 5px 5px 0 rgba(50, 50, 50, 0.2);
+      padding: 0;
+      position: absolute;
+      z-index: 100;
+    }
+  }
\ No newline at end of file
diff --git a/addon/templates/components/es-navbar.hbs b/addon/templates/components/es-navbar.hbs
index 223158b5..c752a6e0 100644
--- a/addon/templates/components/es-navbar.hbs
+++ b/addon/templates/components/es-navbar.hbs
@@ -1,47 +1,12 @@
-<nav class="es-navbar" aria-label="Ember">
-
-  <a class="navbar-brand" href={{navHome}}>
-    <img
-      src="https://glimmer-styleguide.global.ssl.fastly.net/glimmer-styleguide/master/images/ember-logo.svg"
-      alt="home"
-    >
-  </a>
+<nav class="es-navbar">
+  <button class="navbar-toggler ember-view" onclick={{action this.toggleMenu}} aria-label="Site Navigation" aria-expanded="false">
+    <span class="navbar-toggler-icon"></span>
+  </button>
 
-  <ul class="navbar-nav" role="menubar" aria-expanded="false">
+  <ul class="navbar-list">
     {{#each navLinks as |link index|}}
       {{es-navbar/link link=link index=index}}
     {{/each}}
   </ul>
 
-
-  {{#if hasBlock}}
-    {{yield}}
-  {{else}}
-    <form class="navbar-form navbar-right searchbox">
-      <div class="input-group">
-        <label for="search-input" class="control-label sr-only">Search</label>
-        <input
-          type="text"
-          class="form-control search input ds-input"
-          placeholder="Search..."
-          id="search-input"
-          role="combobox"
-          aria-expanded="false"
-          aria-owns="algolia-autocomplete-listbox-0"
-          autocorrect="off"
-          autocapitalize="none"
-          spellcheck="false"
-        >
-        <span></span>
-      </div>
-    </form>
-  {{/if}}
-
-  <button
-    class="navbar-toggler ember-view"
-    onclick={{action this.toggleMenu}}
-    aria-label="Open navigation"
-  >
-    <span class="navbar-toggler-icon"></span>
-  </button>
 </nav>
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 88a92721..a00c6001 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -1,11 +1,19 @@
 # Navbar
 
-The navbar comes with the default Ember links, if you would like to override the default links you can pass a json object to update the links in the navbar.
+The EsNavbar component is designed to be the same component used in all Ember websites that use the styleguide. It comes with the default links that are common to all sites. In most cases you will want to make sure the Navbar is inside an EsHeader which will make sure that it is properly centred.
 
 ```handlebars
-{{es-navbar}}
+<EsHeader class="dark">
+  <EsNavbar />
+</EsHeader>
 ```
 
+## Custom Links
+
+If you would like to override the default links you can pass a json object to update the links in the navbar.
+
 ```handlebars
-{{es-navbar links=customLinks}}
+<EsHeader class="dark">
+  <EsNavbar @links={{customLinks}} />
+</EsHeader>
 ```
diff --git a/docs/concepts/accessibility.md b/docs/concepts/accessibility.md
index bb50249d..2d69557f 100644
--- a/docs/concepts/accessibility.md
+++ b/docs/concepts/accessibility.md
@@ -2,5 +2,6 @@
 
 ## Code Guide
 
-- It is okay to ship code that can iterate to being a more inclusive experience, but can still be used by people with assistive technology. 
-- it is not acceptable to ship code that actively breaks the experience for users with assistive technology. 
+### Iterative Improvements
+- It is 100% okay to ship code that can iterate to being a more inclusive experience- as long as it can still be used by people with assistive technology. 
+- It is not okay to ship code that actively breaks the experience for users with assistive technology.