diff --git a/README.md b/README.md
index 82678526..9656c970 100644
--- a/README.md
+++ b/README.md
@@ -160,6 +160,7 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
 - [Modal](https://picocss.com/docs/modal.html)
 - [Navs](https://picocss.com/docs/navs.html)
 - [Progress](https://picocss.com/docs/progress.html)
+- [Dropdowns](https://picocss.com/docs/dropdowns.html)
 
 **Utilities**
 - [Loading](https://picocss.com/docs/loading.html)
diff --git a/docs/dropdowns.html b/docs/dropdowns.html
index 8f2ba2af..4ec70557 100644
--- a/docs/dropdowns.html
+++ b/docs/dropdowns.html
@@ -1,63 +1,347 @@
-<html data-theme="light">
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <script src="script.js"></script>
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css"
+    <title>Dropdowns • Pico.css</title>
+    <meta
+      name="description"
+      content="a dropdown component, without JavaScript."
     />
-    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="../css/pico.min.css" />
+    <link rel="stylesheet" href="css/pico.docs.min.css" />
+    <link rel="canonical" href="https://www.picocss.com/docs/dropdowns.html" />
   </head>
+
   <body>
-    <main class="container">
-      <h1>Dropdown for picocss</h1>
-      <h3>Single select</h3>
-      <p>in order to use dropdown component, use <code>role='dropdown'</code> on details tag.</p>
-      <details role="dropdown">
-        <summary>Single select</summary>
-        <div>
-          <ul>
-            <li>
-              <input type="radio" id="01" name="option1" />
-              <label for="01">Option 1</label>
-            </li>
-            <li>
-              <input type="radio" id="02" name="option1" />
-              <label for="02">Option 2</label>
-            </li>
-          </ul>
-        </div>
-      </details>
-      <h3>Multi-select select</h3>
-      <details role="dropdown">
-        <summary>Multi-select</summary>
-        <div>
-          <ul>
-            <li>
-              <input type="checkbox" id="11" name="option2" />
-              <label for="11">Option 1</label>
-            </li>
-            <li>
-              <input type="checkbox" id="12" name="option2" />
-              <label for="12">Option 2</label>
-            </li>
-          </ul>
-        </d>
-      </details>
-      <h6>Usage notes</h6>
+    <nav class="container-fluid">
       <ul>
         <li>
-          no need to use javascript to close the dropdown when clicked outside.
+          <a href="https://picocss.com" aria-label="Back home"
+            ><svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 1000 1000"
+              height="56px"
+            >
+              <path
+                fill="currentColor"
+                d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"
+              /></svg
+          ></a>
         </li>
+        <li>Documentation</li>
+      </ul>
+      <ul>
         <li>
-          for both single / multi-select case, need javascript to update summary
-          tag text when any option selected.
+          <a href="https://picocss.com#examples" class="secondary">Examples</a>
         </li>
+        <li><a href="./" class="secondary">Docs</a></li>
         <li>
-          in case of single select, remove open attribute on details tag using
-          javascript when an option is selected.
+          <a
+            href="https://github.com/picocss/pico"
+            class="contrast"
+            aria-label="Pico GitHub repository"
+            ><svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 496 512"
+              height="16px"
+            >
+              <path
+                fill="currentColor"
+                d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+              ></path></svg
+          ></a>
         </li>
       </ul>
+    </nav>
+    <main class="container" id="docs">
+      <aside>
+        <nav class="closed-on-mobile">
+          <a href="./" class="secondary" id="toggle-docs-navigation"
+            ><svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="expand"
+              fill="currentColor"
+              viewBox="0 0 16 16"
+              height="16px"
+            >
+              <title>Expand</title>
+              <path
+                fill-rule="evenodd"
+                d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"
+              ></path>
+            </svg>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="collapse"
+              fill="currentColor"
+              viewBox="0 0 16 16"
+              height="16px"
+            >
+              <title>Collapse</title>
+              <path
+                fill-rule="evenodd"
+                d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"
+              ></path>
+            </svg>
+            Table of content</a
+          >
+          <details>
+            <summary>Getting started</summary>
+            <ul>
+              <li><a href="./" id="start-link" class="secondary">Usage</a></li>
+              <li>
+                <a href="./themes.html" id="themes-link" class="secondary"
+                  >Themes</a
+                >
+              </li>
+              <li>
+                <a
+                  href="./customization.html"
+                  id="customization-link"
+                  class="secondary"
+                  >Customization</a
+                >
+              </li>
+              <li>
+                <a href="./classless.html" id="classless-link" class="secondary"
+                  >Class-less version</a
+                >
+              </li>
+              <li>
+                <a href="./rtl.html" id="rtl-link" class="secondary">RTL</a>
+              </li>
+            </ul>
+          </details>
+          <details>
+            <summary>Layout</summary>
+            <ul>
+              <li>
+                <a
+                  href="./containers.html"
+                  id="containers-link"
+                  class="secondary"
+                  >Containers</a
+                >
+              </li>
+              <li>
+                <a href="./grid.html" id="grid-link" class="secondary">Grid</a>
+              </li>
+              <li>
+                <a href="./scroller.html" id="scroller-link" class="secondary"
+                  >Horizontal scroller</a
+                >
+              </li>
+            </ul>
+          </details>
+          <details>
+            <summary>Elements</summary>
+            <ul>
+              <li>
+                <a
+                  href="./typography.html"
+                  id="typography-link"
+                  class="secondary"
+                  >Typography</a
+                >
+              </li>
+              <li>
+                <a href="./buttons.html" id="buttons-link" class="secondary"
+                  >Buttons</a
+                >
+              </li>
+              <li>
+                <a href="./forms.html" id="forms-link" class="secondary"
+                  >Forms</a
+                >
+              </li>
+              <li>
+                <a href="./tables.html" id="tables-link" class="secondary"
+                  >Tables</a
+                >
+              </li>
+            </ul>
+          </details>
+          <details>
+            <summary>Components</summary>
+            <ul>
+              <li>
+                <a
+                  href="./accordions.html"
+                  id="accordions-link"
+                  class="secondary"
+                  >Accordions</a
+                >
+              </li>
+              <li>
+                <a href="./cards.html" id="cards-link" class="secondary"
+                  >Cards</a
+                >
+              </li>
+              <li>
+                <a href="./modal.html" id="modal-link" class="secondary"
+                  >Modal</a
+                >
+              </li>
+              <li>
+                <a href="./navs.html" id="navs-link" class="secondary">Navs</a>
+              </li>
+              <li>
+                <a href="./progress.html" id="progress-link" class="secondary"
+                  >Progress</a
+                >
+              </li>
+              <li>
+                <a href="./dropdowns.html" id="dropdown-link" class="secondary"
+                  >Dropdown</a
+                >
+              </li>
+            </ul>
+          </details>
+          <details>
+            <summary>Utilities</summary>
+            <ul>
+              <li>
+                <a href="./loading.html" id="loading-link" class="secondary"
+                  >Loading</a
+                >
+              </li>
+              <li>
+                <a href="./tooltips.html" id="tooltips-link" class="secondary"
+                  >Tooltips</a
+                >
+              </li>
+            </ul>
+          </details>
+          <details>
+            <summary>Extend</summary>
+            <ul>
+              <li>
+                <a
+                  href="./we-love-classes.html"
+                  id="we-love-classes-link"
+                  class="secondary"
+                  >We love .classes</a
+                >
+              </li>
+            </ul>
+          </details>
+        </nav>
+        <script>
+          const activeLink = document.querySelector('aside a#dropdown-link'),
+            parentAccordion = activeLink.closest('details');
+          activeLink.classList.add('active'),
+            parentAccordion.setAttribute('open', 'true');
+        </script>
+      </aside>
+      <div role="document">
+        <section id="dropdown">
+          <hgroup>
+            <h1>Dropdown</h1>
+            <h2>single / multi select dropdown, without JavaScript.</h2>
+          </hgroup>
+          <article aria-label="Dropdown examples">
+            <details role="dropdown">
+              <summary>Single select</summary>
+              <div>
+                <ul>
+                  <li>
+                    <input type="radio" id="01" name="option1" />
+                    <label for="01">Option 1</label>
+                  </li>
+                  <li>
+                    <input type="radio" id="02" name="option1" />
+                    <label for="02">Option 2</label>
+                  </li>
+                </ul>
+              </div>
+            </details>
+            <details role="dropdown">
+              <summary>Multi-select</summary>
+              <div>
+                <ul>
+                  <li>
+                    <input type="checkbox" id="11" name="option2" />
+                    <label for="11">Option 1</label>
+                  </li>
+                  <li>
+                    <input type="checkbox" id="12" name="option2" />
+                    <label for="12">Option 2</label>
+                  </li>
+                </ul>
+              </div>
+            </details>
+          </article>
+
+          <label>Usage notes</label>
+          <ul>
+            <li>
+              in order to use dropdown component, use
+              <code>role='dropdown'</code> on details tag.
+            </li>
+            <li>
+              no need to use javascript to close the dropdown when clicked
+              outside.
+            </li>
+            <li>
+              for both single / multi-select case, need javascript to update
+              summary tag text when any option selected.
+            </li>
+            <li>
+              in case of single select, remove open attribute on details tag
+              using javascript when an option is selected.
+            </li>
+          </ul>
+          <footer class="code">
+            <pre>
+            <code>
+              <em>For Single-select</em>
+              <em>===============================</em>
+              &lt;<b>details role="dropdown"</b>&gt;
+                &lt;<b>summary</b>&gt;Single select&lt;<b>/summary</b>&gt;
+                &lt;<b>div</b>&gt;
+                  &lt;<b>ul</b>&gt;
+                    &lt;<b>li</b>&gt;
+                      &lt;<b>input type="radio" id="01" name="option1" /</b>&gt;
+                      &lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt;
+                    &lt;<b>/li</b>&gt;
+                    &lt;<b>li</b>&gt;
+                      &lt;<b>input type="radio" id="02" name="option1" /</b>&gt;
+                      &lt;<b>label for="02"</b>&gt;Option 2&lt;<b>/label</b>&gt;
+                    &lt;<b>/li</b>&gt;
+                  &lt;<b>/ul</b>&gt;
+                &lt;<b>/div</b>&gt;
+              &lt;<b>/details</b>&gt;
+
+
+              <em>For Multi-select</em>
+              <em>===============================</em>
+              &lt;<b>details role="dropdown"</b>&gt;
+                &lt;<b>summary</b>&gt;Multi select&lt;<b>/summary</b>&gt;
+                &lt;<b>div</b>&gt;
+                  &lt;<b>ul</b>&gt;
+                    &lt;<b>li</b>&gt;
+                      &lt;<b>input type="checkbox" id="01" name="option1" /</b>&gt;
+                      &lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt;
+                    &lt;<b>/li</b>&gt;
+                    &lt;<b>li</b>&gt;
+                      &lt;<b>input type="checkbox" id="02" name="option1" /</b>&gt;
+                      &lt;<b>label for="02"</b>&gt;Option 2&lt;<b>/label</b>&gt;
+                    &lt;<b>/li</b>&gt;
+                  &lt;<b>/ul</b>&gt;
+                &lt;<b>/div</b>&gt;
+              &lt;<b>/details</b>&gt;
+            </code>
+          </pre>
+          </footer>
+        </section>
+      </div>
     </main>
+    <script src="js/commons.min.js"></script>
   </body>
 </html>
