diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 2073dbf..9568d56 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -41,6 +41,7 @@
             </ul>
           </li>
           <li><a href="#tree-view">TreeView</a></li>
+          <li><a href="#tabs">Tabs</a></li>
           <li><a href="#table-view">TableView</a></li>
         </ul>
       </li>
@@ -800,6 +801,84 @@
     </section>
 
     <section class="component">
+      <h3 id="tabs">Tabs</h3>
+      <div>
+        <blockquote>
+          A <em>tab control</em> is analogous to a divider in a file cabinet or notebook.
+          You can use this control to define multiple logical pages or sections of information within the same window.
+
+          <footer>
+            &mdash; Microsoft Windows User Experience p. 193
+          </footer>
+        </blockquote>
+
+        <p>
+          To render a tab list, use a <code>menu</code> element with the
+          <code>[role=tablist]</code> attribute. The children of this menu (<code>li</code>
+          elements), should get a <code>[role=tab]</code> attribute.
+        </p>
+
+        <p>
+          Tabs should be managed by adding custom javascript code.
+          All you need is to add the <code>[aria-selected=true]</code> attribute to the active tab.
+        </p>
+
+        <%- example(`
+        <div class="window-body">
+          <p>Hello, world!</p>
+
+          <menu role="tablist">
+            <li role="tab" aria-selected="true"><a href="#tabs">Desktop</a></li>
+            <li role="tab"><a href="#tabs">My computer</a></li>
+            <li role="tab"><a href="#tabs">Control panel</a></li>
+            <li role="tab"><a href="#tabs">Devices manager</a></li>
+            <li role="tab"><a href="#tabs">Hardware profiles</a></li>
+            <li role="tab"><a href="#tabs">Performance</a></li>
+          </menu>
+          <div class="window" role="tabpanel">
+            <div class="window-body">
+              <p>the tab content</p>
+            </div>
+          </div>
+        </div>
+        `) %>
+
+        <p>
+          To create multirows tabs, add a <code>multirows</code>
+          class to the <code>menu</code> tag.
+        </p>
+
+        <%- example(`
+        <div class="window-body">
+          <p>Hello, world!</p>
+
+          <menu role="tablist" class="multirows">
+            <li role="tab"><a href="#tabs">Desktop</a></li>
+            <li role="tab"><a href="#tabs">My computer</a></li>
+            <li role="tab"><a href="#tabs">Control panel</a></li>
+            <li role="tab"><a href="#tabs">Devices manager</a></li>
+            <li role="tab"><a href="#tabs">Hardware profiles</a></li>
+            <li role="tab"><a href="#tabs">Performance</a></li>
+          </menu>
+          <menu role="tablist" class="multirows">
+            <li role="tab"><a href="#tabs">Users</a></li>
+            <li role="tab"><a href="#tabs">Network</a></li>
+            <li role="tab"><a href="#tabs">Programs</a></li>
+            <li role="tab"><a href="#tabs">Services</a></li>
+            <li role="tab"><a href="#tabs">Resources</a></li>
+            <li role="tab"><a href="#tabs">Advanced</a></li>
+          </menu>
+          <div class="window" role="tabpanel">
+            <div class="window-body">
+              <p>the tab content</p>
+            </div>
+          </div>
+        </div>
+        `) %>
+              </div>
+    </section>
+    <section class="component">
+
       <h3 id="table-view">TableView</h3>
       <div>
         <p>
diff --git a/style.css b/style.css
index f222a15..12cf871 100644
--- a/style.css
+++ b/style.css
@@ -69,6 +69,12 @@
   --border-field: inset -1px -1px var(--button-highlight),
     inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
     inset 2px 2px var(--window-frame);
+
+  /* Tabs */
+  --border-tab: inset -1px 0 var(--window-frame),
+    inset 1px 1px var(--button-face),
+    inset -2px 0 var(--button-shadow),
+    inset 2px 2px var(--button-highlight)
 }
 
 @font-face {
@@ -792,6 +798,53 @@ summary:focus {
   background-image: svg-load("./icon/button-right.svg");
 }
 
+.window[role=tabpanel] {
+  position: relative;
+  z-index: 2;
+}
+
+menu[role=tablist] {
+  position: relative;
+  margin: 0 0 -2px 0;
+  text-indent: 0;
+  list-style-type: none;
+  display: flex;
+  padding-left: 3px;
+}
+
+menu[role=tablist] > li {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  box-shadow: var(--border-tab);
+  z-index: 1;
+}
+
+menu[role=tablist] > li[aria-selected=true] {
+  padding-bottom: 2px;
+  margin-top: -2px;
+  background-color: var(--surface);
+  position: relative;
+  z-index: 8;
+  margin-left: -3px;
+}
+
+menu[role=tablist] > li > a {
+  display: block;
+  color: #222;
+  margin: 6px;
+  text-decoration: none;
+}
+menu[role=tablist] > li[aria-selected=true] > a:focus {
+  outline: none;
+}
+menu[role=tablist] > li > a:focus {
+  outline: 1px dotted #222;
+}
+
+menu[role=tablist].multirows > li {
+  flex-grow: 1;
+  text-align: center;
+}
 .sunken-panel {
   box-sizing: border-box;
   border: 2px groove transparent;
@@ -831,4 +884,4 @@ table > tbody > tr.highlighted {
 table > tbody > tr > * {
   padding: 0 var(--grouped-element-spacing);
   height: 14px;
-}
\ No newline at end of file
+}