diff --git a/docs/content/components/select-menu.md b/docs/content/components/select-menu.md
index 7b684e7d..faa5d4bc 100644
--- a/docs/content/components/select-menu.md
+++ b/docs/content/components/select-menu.md
@@ -512,6 +512,31 @@ When fetching large lists, consider showing a `.SelectMenu-loading` animation.
 <div class="d-none d-sm-block" style="height: 220px"><!-- min height for > sm --></div>
 ```
 
+## Disabled
+
+To disable a list item, use the `disabled` attribute for `<button>`s. For `<a>`s replace the `href` with an `aria-disabled="true"` attribute. Note: If not obvious, try to communicate to the user why an item is disabled.
+
+```html live
+<details class="details-reset details-overlay" open>
+  <summary class="btn" aria-haspopup="true">
+    Choose an item
+  </summary>
+  <div class="SelectMenu">
+    <div class="SelectMenu-modal">
+      <div class="SelectMenu-list">
+        <button class="SelectMenu-item" role="menuitem">Item 1</button>
+        <button class="SelectMenu-item" role="menuitem" disabled>Item 2 (disabled)</button>
+        <a class="SelectMenu-item" role="menuitem" href="#">Item 3</a>
+        <a class="SelectMenu-item" role="menuitem" aria-disabled="true">Item 4 (disabled)</a>
+      </div>
+    </div>
+  </div>
+</details>
+
+<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
+<div class="d-none d-sm-block" style="height: 160px"><!-- min height for > sm --></div>
+```
+
 ## Blankslate
 
 Sometimes a Select Menu needs to communicate a "blank slate" where there's no content in the menu's list. Usually these include a clear call to action to add said content to the list. Swap out the contents of a `.SelectMenu-list` with a `.SelectMenu-blankslate` and customize its contents as needed.
diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss
index 70492b56..f3264b5e 100644
--- a/src/select-menu/select-menu.scss
+++ b/src/select-menu/select-menu.scss
@@ -188,7 +188,7 @@ $SelectMenu-max-height: 480px !default;
   width: 100%;
   padding: $spacer-3;
   overflow: hidden;
-  color: $text-gray;
+  color: $text-gray-dark;
   text-align: left;
   cursor: pointer;
   background-color: $bg-white;
@@ -385,7 +385,7 @@ $SelectMenu-max-height: 480px !default;
 
 // Selected
 //
-// Visible when a used clicks/taps on a list item
+// Visible when a user clicks/taps on a list item
 
 .SelectMenu-item[aria-checked=true] {
   font-weight: $font-weight-semibold;
@@ -398,6 +398,16 @@ $SelectMenu-max-height: 480px !default;
   }
 }
 
+// Disabled
+//
+// Prevent list items to be selected
+
+.SelectMenu-item:disabled,
+.SelectMenu-item[aria-disabled=true] {
+  color: $text-gray-light;
+  pointer-events: none;
+}
+
 // Can hover states
 //
 // For mouse/keyboard input