diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index c8eeb30..56628e1 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -38,6 +38,7 @@
               <li><a href="#title-bar">Title Bar</a></li>
               <li><a href="#window-contents">Window contents</a></li>
               <li><a href="#status-bar">Status Bar</a></li>
+              <li><a href="#menu-bar">Menu Bar</a></li>
             </ul>
           </li>
           <li><a href="#tree-view">TreeView</a></li>
@@ -719,6 +720,81 @@
 
     </section>
 
+    <section class="component">
+      <h4 id="menu-bar">Menu Bar</h4>
+      <div>
+        <p>
+          You can render a menu bar with the <code>menu-bar</code> class,
+          then use a <code>button</code> element to render the menu item.
+          Finally, you can use a <code>ul</code> element with the <code>menu</code>
+          class to render a menu that the button will open.
+        </p>
+
+        <%- example(`
+        <div class="window" style="width: 320px">
+          <div class="title-bar">
+            <div class="title-bar-text">Untitled - Notepad</div>
+            <div class="title-bar-controls">
+              <button aria-label="Minimize"></button>
+              <button aria-label="Maximize"></button>
+              <button aria-label="Close"></button>
+            </div>
+          </div>
+          <div class="menu-bar">
+            <div class="menu-bar-item">
+              <button aria-label="File"><u>F</u>ile</button>
+              <ul class="menu">
+                <li><u>N</u>ew</li>
+                <li><u>O</u>pen...</li>
+                <li><u>S</u>ave</li>
+                <li>Save <u>A</u>s...</li>
+                <li class="divider"></li>
+                <li>Page Se<u>t</u>up...</li>
+                <li class="disabled"><u>P</u>rint</li>
+                <li class="divider"></li>
+                <li>E<u>x</u>it</li>
+              </ul>
+            </div>
+            <div class="menu-bar-item">
+              <button aria-label="Edit"><u>E</u>dit</button>
+              <ul class="menu">
+                <li class="disabled"><u>U</u>ndo<span>Ctrl+Z</span></li>
+                <li class="divider"></li>
+                <li class="disabled"><u>C</u>ut<span>Ctrl+X</span></li>
+                <li class="disabled"><u>C</u>opy<span>Ctrl+C</span></li>
+                <li class="disabled"><u>P</u>aste<span>Ctrl+V</span></li>
+                <li class="disabled">De<u>l</u>ete<span>Del</span></li>
+                <li class="divider"></li>
+                <li>Select <u>A</u>ll</li>
+                <li>Time/<u>D</u>ate<span>F5</span></li>
+                <li class="divider"></li>
+                <li><u>W</u>ord Wrap</li>
+                <li>Set <u>F</u>ont...</li>
+              </ul>
+            </div>
+            <div class="menu-bar-item">
+              <button aria-label="File"><u>S</u>earch</button>
+              <ul class="menu">
+                <li><u>F</u>ind...</li>
+                <li>Find <u>N</u>ext<span>F3</span></li>
+              </ul>
+            </div>
+            <div class="menu-bar-item">
+              <button aria-label="File"><u>H</u>elp</button>
+              <ul class="menu">
+                <li><u>H</u>elp Topics</li>
+                <li class="divider"></li>
+                <li><u>A</u>bout Notepad</li>
+              </ul>
+            </div>
+          </div>
+          <div class="window-body frame">
+            <textarea style="resize: none; width:100%; height:100px; overflow:scroll;">Pro-tip: Use the \`frame\` class on the \`window-body\` for smaller margins.</textarea>
+          </div>
+        </div>
+      `) %>
+    </section>
+
     <section class="component">
       <h3 id="tree-view">TreeView</h3>
       <div>
diff --git a/style.css b/style.css
index 5c22050..9637984 100644
--- a/style.css
+++ b/style.css
@@ -283,6 +283,32 @@ input[type="reset"]:disabled,
   background-position: top 3px left 4px;
 }
 
+.menu-bar {
+  display: flex;
+}
+
+.menu-bar .menu-bar-item {
+  position: relative;
+}
+
+.menu-bar .menu-bar-item > button {
+  box-shadow: none;
+  min-height: 20px;
+  min-width: auto;
+  outline: none;
+  padding: 0 6px;
+}
+
+.menu-bar .menu-bar-item > button:active,
+.menu-bar .menu-bar-item > button:focus {
+  box-shadow: inset -1px -1px #fff, inset 0px 0px #0a0a0a, inset -1px -1px #dfdfdf, inset 1px 1px grey;
+  text-shadow: 0 0 #222;
+}
+
+.menu-bar .menu-bar-item > button:focus + .menu {
+  display: block;
+}
+
 .status-bar {
   margin: 0px 1px;
   display: flex;
@@ -300,6 +326,10 @@ input[type="reset"]:disabled,
   margin: var(--element-spacing);
 }
 
+.window-body.frame {
+  margin: 2px;
+}
+
 fieldset {
   border-image: svg-load("./icon/groupbox-border.svg") 2;
   padding: calc(2 * var(--border-width) + var(--element-spacing));
@@ -647,6 +677,43 @@ a:focus {
   outline: 1px dotted var(--link-blue);
 }
 
+ul.menu {
+  background: silver;
+  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
+  display: none;
+  list-style-type: none;
+  margin: 0;
+  min-width: 100px;
+  padding: 2px;
+  position: absolute;
+  width: max-content;
+}
+
+ul.menu > li:not(.divider) {
+  cursor: default;
+  padding: 3px 20px 3px 20px;
+}
+
+ul.menu li:not(.disabled):not(.divider):hover {
+  background: var(--dialog-blue);
+  color: #fff;
+}
+
+ul.menu li.disabled {
+  color: var(--button-shadow);
+}
+
+ul.menu li.divider {
+  border-bottom: 1px solid #dfdfdf;
+  border-top: 1px solid grey;
+  margin: 2px;
+}
+
+ul.menu li > span {
+  float: right;
+  margin-left: 10px;
+}
+
 ul.tree-view {
   display: block;
   background: var(--button-highlight);