diff --git a/docs/api.md b/docs/api.md
index 34c6461..5dc6e71 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -16,18 +16,30 @@ The auro-menu element provides users a way to select from a list of options.
 
 ## Slots
 
-| Name | Description                              |
-|------|------------------------------------------|
-|      | Open slot for insertion of menu options. |
+| Name | Description                         |
+|------|-------------------------------------|
+|      | Slot for insertion of menu options. |
 
 
 # auro-menuoption
 
 The auro-menu element provides users a way to define a menu option.
 
+## Attributes
+
+| Attribute | Type     | Description                                 |
+|-----------|----------|---------------------------------------------|
+| `value`   | `String` | Specifies the value to be sent to a server. |
+
 ## Properties
 
 | Property   | Attribute  | Type      | Description                                      |
 |------------|------------|-----------|--------------------------------------------------|
 | `disabled` | `disabled` | `Boolean` | When true specifies that the menuoption is disabled. |
-| `selected` | `selected` | `Boolean` | When true designates the selected menuoption. This attribute is only applied via the `optionSelected` event. If manually added without the `optionSelected` event, the attribute will be removed. |
+| `selected` | `selected` | `Boolean` | Specifies that an option is selected. Attribute is applied via the `optionSelected` event for selection at page load. |
+
+## Slots
+
+| Name | Description                                      |
+|------|--------------------------------------------------|
+|      | Specifies text for an option, but is not the value. |
diff --git a/src/auro-menu.js b/src/auro-menu.js
index 71f4365..98ffb3d 100644
--- a/src/auro-menu.js
+++ b/src/auro-menu.js
@@ -17,7 +17,7 @@ import "focus-visible/dist/focus-visible.min.js";
  *
  * @attr {Number} selectOption - Predefine selected option from menu. Index starts at 0.
  * @fires optionSelected - Value for pre-selected menu option. This value may be placed on the `auro-menu` element specifically or on a outer parent element.
- * @slot Open slot for insertion of menu options.
+ * @slot Slot for insertion of menu options.
  */
 
 class AuroMenu extends LitElement {
@@ -109,7 +109,11 @@ class AuroMenu extends LitElement {
         if (parentSelectOption >= 0) {
           this.selectOption = parentSelectOption;
 
-          dispatchEventOptionSelected(this.selectOption, this.options[this.selectOption].attributes['data-value'].value, this.options[this.selectOption].innerText);
+          dispatchEventOptionSelected(
+            this.selectOption,
+            this.options[this.selectOption].value,
+            this.options[this.selectOption].innerText
+          );
         }
       }
     }
@@ -120,7 +124,7 @@ class AuroMenu extends LitElement {
           if (evt.key.toLowerCase() === ' ') {
             evt.preventDefault();
           }
-          dispatchEventOptionSelected(Number(evt.target.getAttribute('index')), evt.target.getAttribute('data-value'), evt.target.innerText);
+          dispatchEventOptionSelected(Number(evt.target.getAttribute('index')), evt.target.value, evt.target.innerText);
         }
       }
 
@@ -146,7 +150,7 @@ class AuroMenu extends LitElement {
     };
 
     // Prep each <li>. Give it an index, set its tabindex to -1, add 'keydown' and 'click' event listeners, inject a check mark icon
-    const triggerEvent = (evt) => dispatchEventOptionSelected(Number(evt.target.getAttribute('index')), evt.target.getAttribute('data-value'), evt.target.innerText);
+    const triggerEvent = (evt) => dispatchEventOptionSelected(Number(evt.target.getAttribute('index')), evt.target.getAttribute('value'), evt.target.innerText);
 
     for (let iter = 0; iter < this.options.length; iter += 1) {
 
diff --git a/src/auro-menuoption.js b/src/auro-menuoption.js
index 2576835..fac9dfa 100644
--- a/src/auro-menuoption.js
+++ b/src/auro-menuoption.js
@@ -11,8 +11,10 @@ import check from '@alaskaairux/icons/dist/icons/interface/check-sm_es6';
 /**
  * The auro-menu element provides users a way to define a menu option.
  *
+ * @attr {String} value - Specifies the value to be sent to a server.
  * @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
- * @attr {Boolean} selected - When true designates the selected menuoption. This attribute is only applied via the `optionSelected` event. If manually added without the `optionSelected` event, the attribute will be removed.
+ * @attr {Boolean} selected - Specifies that an option is selected. Attribute is applied via the `optionSelected` event for selection at page load.
+ * @slot Specifies text for an option, but is not the value.
  */
 class AuroMenuOption extends LitElement {
   constructor() {
diff --git a/test/auro-menu.test.js b/test/auro-menu.test.js
index 25a78bf..d86f225 100644
--- a/test/auro-menu.test.js
+++ b/test/auro-menu.test.js
@@ -113,7 +113,7 @@ describe('auro-menu', () => {
 async function defaultFixture() {
   return await fixture(html`
       <div>
-        <auro-menu><auro-menuoption data-value="option 1">option 1</auro-menuoption><auro-menuoption data-value="option 2">option 2</auro-menuoption><auro-menuoption data-value="option 3">option 3</auro-menuoption><auro-menuoption data-value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption data-value="departures">Departures</auro-menuoption><auro-menuoption data-value="arrivals">Arrivals</auro-menuoption></auro-menu>
+        <auro-menu><auro-menuoption value="option 1">option 1</auro-menuoption><auro-menuoption value="option 2">option 2</auro-menuoption><auro-menuoption value="option 3">option 3</auro-menuoption><auro-menuoption value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption value="departures">Departures</auro-menuoption><auro-menuoption value="arrivals">Arrivals</auro-menuoption></auro-menu>
       </div>
   `);
 }
@@ -121,7 +121,7 @@ async function defaultFixture() {
 async function preSelectFixture() {
   return await fixture(html`
       <div>
-        <auro-menu selectOption="2"><auro-menuoption data-value="option 1">option 1</auro-menuoption><auro-menuoption data-value="option 2">option 2</auro-menuoption><auro-menuoption data-value="option 3">option 3</auro-menuoption><auro-menuoption data-value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption data-value="departures">Departures</auro-menuoption><auro-menuoption data-value="arrivals">Arrivals</auro-menuoption></auro-menu>
+        <auro-menu selectOption="2"><auro-menuoption value="option 1">option 1</auro-menuoption><auro-menuoption value="option 2">option 2</auro-menuoption><auro-menuoption value="option 3">option 3</auro-menuoption><auro-menuoption value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption value="departures">Departures</auro-menuoption><auro-menuoption value="arrivals">Arrivals</auro-menuoption></auro-menu>
       </div>
   `);
 }
@@ -129,7 +129,7 @@ async function preSelectFixture() {
 async function outerParentPreSelectFixture() {
   return await fixture(html`
       <div selectOption="2">
-        <auro-menu><auro-menuoption data-value="option 1">option 1</auro-menuoption><auro-menuoption data-value="option 2">option 2</auro-menuoption><auro-menuoption data-value="option 3">option 3</auro-menuoption><auro-menuoption data-value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption data-value="departures">Departures</auro-menuoption><auro-menuoption data-value="arrivals">Arrivals</auro-menuoption></auro-menu>
+        <auro-menu><auro-menuoption value="option 1">option 1</auro-menuoption><auro-menuoption value="option 2">option 2</auro-menuoption><auro-menuoption value="option 3">option 3</auro-menuoption><auro-menuoption value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption value="departures">Departures</auro-menuoption><auro-menuoption value="arrivals">Arrivals</auro-menuoption></auro-menu>
       </div>
   `);
 }