diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js
index af3d0bf26..3b09cdab0 100644
--- a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js
@@ -10,161 +10,10 @@ import { BaseComponent } from '../base-component.js';
 import Mousetrap from 'mousetrap';
 import 'url-search-params-polyfill';
 
-const SubSubList = props => {
-  const { children, category, elem } = props;
-  const reorderedChildren = [];
-
-  const nonViewAllItems = elem.noViewAll
-    ? children.filter(item => item.patternName !== 'View All')
-    : children.filter(
-        item =>
-          item.patternName !== 'View All' && !item.patternName.includes(' Docs')
-      );
-  const viewAllItems = elem.noViewAll
-    ? []
-    : children.filter(item => item.patternName === 'View All');
-
-  reorderedChildren.push(...viewAllItems, ...nonViewAllItems);
-
-  return (
-    <li className={`pl-c-nav__item pl-c-nav__item--${category.toLowerCase()}`}>
-      {viewAllItems.length > 0 ? (
-        viewAllItems.map(patternSubtypeItem => (
-          <div class="pl-c-nav__link--overview-wrapper">
-            <a
-              href={`patterns/${patternSubtypeItem.patternPath}`}
-              className={`pl-c-nav__link pl-c-nav__link--sublink
-                ${
-                  patternSubtypeItem.patternName === 'View All'
-                    ? 'pl-c-nav__link--overview pl-js-link-overview'
-                    : 'pl-c-nav__link--subsublink'
-                }
-                `}
-              onClick={e =>
-                elem.handleClick(e, patternSubtypeItem.patternPartial)
-              }
-              data-patternpartial={patternSubtypeItem.patternPartial}
-            >
-              {patternSubtypeItem.patternName === 'View All'
-                ? `${category}`
-                : patternSubtypeItem.patternName}
-              {patternSubtypeItem.patternState && (
-                <span
-                  class={`pl-c-pattern-state pl-c-pattern-state--${patternSubtypeItem.patternState}`}
-                  title={patternSubtypeItem.patternState}
-                />
-              )}
-            </a>
-
-            {nonViewAllItems.length >= 1 && (
-              <SpecialButton
-                aria-controls={category}
-                onClick={elem.toggleSpecialNavPanel}
-              >
-                {category}
-              </SpecialButton>
-            )}
-          </div>
-        ))
-      ) : (
-        <Button aria-controls={category} onClick={elem.toggleNavPanel}>
-          {category}
-        </Button>
-      )}
-
-      {((viewAllItems.length && nonViewAllItems.length) ||
-        viewAllItems.length === 0) && (
-        <ol
-          id={category}
-          className={`pl-c-nav__subsublist pl-c-nav__subsublist--dropdown pl-js-acc-panel`}
-        >
-          {nonViewAllItems.map(patternSubtypeItem => (
-            <li class="pl-c-nav__item">
-              <a
-                href={`patterns/${patternSubtypeItem.patternPath}`}
-                className={`pl-c-nav__link pl-c-nav__link--sublink
-                      ${
-                        patternSubtypeItem.patternName === 'View All'
-                          ? 'pl-c-nav__link--overview'
-                          : 'pl-c-nav__link--subsublink'
-                      }
-                    `}
-                onClick={e =>
-                  elem.handleClick(e, patternSubtypeItem.patternPartial)
-                }
-                data-patternpartial={patternSubtypeItem.patternPartial}
-              >
-                {patternSubtypeItem.patternName === 'View All'
-                  ? `${category} Overview`
-                  : patternSubtypeItem.patternName}
-                {patternSubtypeItem.patternState && (
-                  <span
-                    class={`pl-c-pattern-state pl-c-pattern-state--${patternSubtypeItem.patternState}`}
-                    title={patternSubtypeItem.patternState}
-                  />
-                )}
-              </a>
-            </li>
-          ))}
-        </ol>
-      )}
-    </li>
-  );
-};
-
-const SpecialButton = props => {
-  return (
-    <button
-      className={`pl-c-nav__link pl-c-nav__link--section-dropdown pl-js-acc-handle`}
-      role="tab"
-      {...props}
-    >
-      {props.children}
-      <span
-        class="pl-c-nav__link-icon"
-        dangerouslySetInnerHTML={{
-          __html: '<pl-icon name="arrow-down"></pl-icon>',
-        }}
-      />
-    </button>
-  );
-};
-
-const Button = props => {
-  return (
-    <button
-      className={`pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle`}
-      role="tab"
-      {...props}
-    >
-      <span className={`pl-c-nav__link-text`}>{props.children}</span>
-      <span
-        class="pl-c-nav__link-icon"
-        dangerouslySetInnerHTML={{
-          __html: '<pl-icon name="arrow-down"></pl-icon>',
-        }}
-      />
-    </button>
-  );
-};
-
-const ButtonTitle = props => {
-  return (
-    <button
-      className={`pl-c-nav__link pl-c-nav__link--title pl-js-acc-handle`}
-      role="tab"
-      {...props}
-    >
-      <span
-        class="pl-c-nav__link-icon"
-        dangerouslySetInnerHTML={{
-          __html: '<pl-icon name="arrow-down"></pl-icon>',
-        }}
-      />
-      <span className={`pl-c-nav__link-text`}>{props.children}</span>
-    </button>
-  );
-};
+import { NavTitle } from './src/NavTitle';
+import { NavList } from './src/NavList';
+import { NavLink } from './src/NavLink';
+import { NavItem } from './src/NavItem';
 
 @define
 class Nav extends BaseComponent {
@@ -370,7 +219,22 @@ class Nav extends BaseComponent {
 
   toggleNavPanel(e) {
     const target = e.target;
+
     target.classList.toggle('pl-is-active');
+
+    // when the Nav renders as a dropdown menu, only allow one top-level menu item to be open at a time to prevent overlap issues
+    if (this.layoutMode !== 'vertical' && window.innerWidth > 670) {
+      this.topLevelTriggers = document.querySelectorAll(
+        '.pl-c-nav__link--title.pl-is-active'
+      );
+
+      this.topLevelTriggers.forEach(trigger => {
+        if (trigger !== target) {
+          trigger.classList.remove('pl-is-active');
+          trigger.nextSibling.classList.remove('pl-is-active');
+        }
+      });
+    }
   }
 
   rendered() {
@@ -393,32 +257,28 @@ class Nav extends BaseComponent {
     return (
       <ol class="pl-c-nav__list pl-js-pattern-nav-target">
         {patternTypes.map((item, i) => {
-          const classes = classNames({
-            [`pl-c-nav__item pl-c-nav__item--${item.patternTypeLC}`]: true,
-          });
-
           const patternItems = item.patternItems;
 
           return (
-            <li className={classes}>
-              <ButtonTitle
+            <NavItem className={`pl-c-nav__item--${item.patternTypeLC}`}>
+              <NavTitle
                 aria-controls={item.patternTypeLC}
                 onClick={this.toggleNavPanel}
               >
                 {item.patternTypeUC}
-              </ButtonTitle>
+              </NavTitle>
               <ol
                 id={item.patternSubtypeUC}
                 className={`pl-c-nav__sublist pl-c-nav__sublist--dropdown pl-js-acc-panel`}
               >
                 {item.patternTypeItems.map((patternSubtype, i) => {
                   return (
-                    <SubSubList
+                    <NavList
                       elem={this.elem}
                       category={patternSubtype.patternSubtypeUC}
                     >
                       {patternSubtype.patternSubtypeItems}
-                    </SubSubList>
+                    </NavList>
                   );
                 })}
 
@@ -428,31 +288,13 @@ class Nav extends BaseComponent {
                       patternItem.patternPartial.includes('viewall') ? (
                       ''
                     ) : (
-                      <li class="pl-c-nav__item">
-                        <a
-                          href={`patterns/${patternItem.patternPath}`}
-                          class="pl-c-nav__link pl-c-nav__link--pattern"
-                          onClick={e =>
-                            this.handleClick(e, patternItem.patternPartial)
-                          }
-                          data-patternpartial={patternItem.patternPartial}
-                          tabindex="0"
-                        >
-                          {patternItem.patternName === 'View All'
-                            ? patternItem.patternName + ' ' + item.patternTypeUC
-                            : patternItem.patternName}
-                          {patternItem.patternState && (
-                            <span
-                              class={`pl-c-pattern-state pl-c-pattern-state--${patternItem.patternState}`}
-                              title={patternItem.patternState}
-                            />
-                          )}
-                        </a>
-                      </li>
+                      <NavItem>
+                        <NavLink item={patternItem} elem={this} />
+                      </NavItem>
                     );
                   })}
               </ol>
-            </li>
+            </NavItem>
           );
         })}
 
@@ -461,7 +303,7 @@ class Nav extends BaseComponent {
           window.ishControls.ishControlsHide === undefined ||
           (window.ishControls.ishControlsHide['views-all'] !== true &&
             window.ishControls.ishControlsHide.all !== true)) && (
-          <li class="pl-c-nav__item">
+          <NavItem>
             <a
               onClick={e => this.handleClick(e, 'all')}
               href="styleguide/html/styleguide.html"
@@ -471,7 +313,7 @@ class Nav extends BaseComponent {
             >
               All
             </a>
-          </li>
+          </NavItem>
         )}
       </ol>
     );
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavButton.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavButton.js
new file mode 100644
index 000000000..3ce1ee00d
--- /dev/null
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavButton.js
@@ -0,0 +1,19 @@
+import { h } from 'preact';
+
+export const NavButton = props => {
+  return (
+    <button
+      className={`pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle`}
+      role="tab"
+      {...props}
+    >
+      <span className={`pl-c-nav__link-text`}>{props.children}</span>
+      <span
+        class="pl-c-nav__link-icon"
+        dangerouslySetInnerHTML={{
+          __html: '<pl-icon name="arrow-down"></pl-icon>',
+        }}
+      />
+    </button>
+  );
+};
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavItem.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavItem.js
new file mode 100644
index 000000000..b346cd3e9
--- /dev/null
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavItem.js
@@ -0,0 +1,8 @@
+import { h } from 'preact';
+import cx from 'classnames';
+
+export const NavItem = props => {
+  const classes = cx('pl-c-nav__item', props.className);
+
+  return <li className={classes}>{props.children}</li>;
+};
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavLink.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavLink.js
new file mode 100644
index 000000000..80f3b26d9
--- /dev/null
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavLink.js
@@ -0,0 +1,26 @@
+import { h } from 'preact';
+import { PatternState } from './PatternState';
+
+export const NavLink = props => {
+  return (
+    <a
+      href={`patterns/${props.item.patternPath}`}
+      className={`pl-c-nav__link pl-c-nav__link--sublink
+            ${
+              props.item.patternName === 'View All'
+                ? 'pl-c-nav__link--overview'
+                : 'pl-c-nav__link--subsublink'
+            }
+          `}
+      onClick={e => props.elem.handleClick(e, props.item.patternPartial)}
+      data-patternpartial={props.item.patternPartial}
+    >
+      {props.item.patternName === 'View All' && props.category
+        ? `${props.category}`
+        : props.item.patternName}
+      {props.item.patternState && (
+        <PatternState variant={props.item.patternState} />
+      )}
+    </a>
+  );
+};
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavList.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavList.js
new file mode 100644
index 000000000..0f5269041
--- /dev/null
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavList.js
@@ -0,0 +1,68 @@
+import { h } from 'preact';
+import { NavToggle } from './NavToggle';
+import { NavLink } from './NavLink';
+import { NavItem } from './NavItem';
+
+export const NavList = props => {
+  const { children, category, elem } = props;
+  const reorderedChildren = [];
+
+  const nonViewAllItems = elem.noViewAll
+    ? children.filter(item => item.patternName !== 'View All')
+    : children.filter(
+        item =>
+          item.patternName !== 'View All' && !item.patternName.includes(' Docs')
+      );
+  const viewAllItems = elem.noViewAll
+    ? []
+    : children.filter(item => item.patternName === 'View All');
+
+  reorderedChildren.push(...viewAllItems, ...nonViewAllItems);
+
+  return (
+    <NavItem className={`pl-c-nav__item--${category.toLowerCase()}`}>
+      {viewAllItems.length > 0 ? (
+        viewAllItems.map(patternSubtypeItem => (
+          <div class="pl-c-nav__link--overview-wrapper">
+            <NavLink
+              category={category}
+              item={patternSubtypeItem}
+              elem={elem}
+            />
+
+            {nonViewAllItems.length >= 1 && (
+              <NavToggle
+                aria-controls={category}
+                onClick={elem.toggleSpecialNavPanel}
+              >
+                {category}
+              </NavToggle>
+            )}
+          </div>
+        ))
+      ) : (
+        <Button aria-controls={category} onClick={elem.toggleNavPanel}>
+          {category}
+        </Button>
+      )}
+
+      {((viewAllItems.length && nonViewAllItems.length) ||
+        viewAllItems.length === 0) && (
+        <ol
+          id={category}
+          className={`pl-c-nav__subsublist pl-c-nav__subsublist--dropdown pl-js-acc-panel`}
+        >
+          {nonViewAllItems.map(patternSubtypeItem => (
+            <NavItem>
+              <NavLink
+                category={category}
+                item={patternSubtypeItem}
+                elem={elem}
+              />
+            </NavItem>
+          ))}
+        </ol>
+      )}
+    </NavItem>
+  );
+};
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavTitle.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavTitle.js
new file mode 100644
index 000000000..1ecc22548
--- /dev/null
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavTitle.js
@@ -0,0 +1,19 @@
+import { h } from 'preact';
+
+export const NavTitle = props => {
+  return (
+    <button
+      className={`pl-c-nav__link pl-c-nav__link--title pl-js-acc-handle`}
+      role="tab"
+      {...props}
+    >
+      <span
+        class="pl-c-nav__link-icon"
+        dangerouslySetInnerHTML={{
+          __html: '<pl-icon name="arrow-down"></pl-icon>',
+        }}
+      />
+      <span className={`pl-c-nav__link-text`}>{props.children}</span>
+    </button>
+  );
+};
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavToggle.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavToggle.js
new file mode 100644
index 000000000..cf238ee1a
--- /dev/null
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavToggle.js
@@ -0,0 +1,19 @@
+import { h } from 'preact';
+
+export const NavToggle = props => {
+  return (
+    <button
+      className={`pl-c-nav__link pl-c-nav__link--section-dropdown pl-js-acc-handle`}
+      role="tab"
+      {...props}
+    >
+      {props.children}
+      <span
+        class="pl-c-nav__link-icon"
+        dangerouslySetInnerHTML={{
+          __html: '<pl-icon name="arrow-down"></pl-icon>',
+        }}
+      />
+    </button>
+  );
+};
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/PatternState.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/PatternState.js
new file mode 100644
index 000000000..37a78093d
--- /dev/null
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/PatternState.js
@@ -0,0 +1,10 @@
+import { h } from 'preact';
+
+export const PatternState = props => {
+  return (
+    <span
+      class={`pl-c-pattern-state pl-c-pattern-state--${props.variant}`}
+      title={props.variant}
+    />
+  );
+};
diff --git a/yarn.lock b/yarn.lock
index 3feda9025..ed1c1a551 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1770,6 +1770,11 @@
     once "^1.4.0"
     universal-user-agent "^4.0.0"
 
+"@pattern-lab/starterkit-mustache-base@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@pattern-lab/starterkit-mustache-base/-/starterkit-mustache-base-3.0.3.tgz#8ce9bc8e0d2254ee970a09c4bdc76d4f6131c91d"
+  integrity sha512-AALdLim5L4ODDjUevRGBY/omhzTU38tSJMRRLaCnwoZ9dxn2QOZNampxj5T7Fhn4oTQnyjhawslVbqVekoViig==
+
 "@pattern-lab/starterkit-mustache-demo@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@pattern-lab/starterkit-mustache-demo/-/starterkit-mustache-demo-5.0.0.tgz#40320e474d23b3f2473b1715712f7330802c46f3"
@@ -2546,6 +2551,14 @@ ansi-styles@^4.0.0:
     "@types/color-name" "^1.1.1"
     color-convert "^2.0.1"
 
+ansi-styles@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
+  integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
+  dependencies:
+    "@types/color-name" "^1.1.1"
+    color-convert "^2.0.1"
+
 ansi-styles@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178"
@@ -4071,6 +4084,14 @@ chalk@^0.4.0:
     has-color "~0.1.0"
     strip-ansi "~0.1.0"
 
+chalk@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.0.0.tgz#6e98081ed2d17faab615eb52ac66ec1fe6209e72"
+  integrity sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 change-case@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.1.0.tgz#0e611b7edc9952df2e8513b27b42de72647dd17e"
@@ -8502,6 +8523,11 @@ has-flag@^3.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
   integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
 
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
 has-gulplog@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/has-gulplog/-/has-gulplog-0.1.0.tgz#6414c82913697da51590397dafb12f22967811ce"
@@ -15852,6 +15878,26 @@ standard-version@4.3.0:
     semver "^5.1.0"
     yargs "^8.0.1"
 
+starterkit-mustache-acidtest@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/starterkit-mustache-acidtest/-/starterkit-mustache-acidtest-0.0.3.tgz#8ad2b69f955b487ce60415b4d2b0e2177aa0af29"
+  integrity sha1-itK2n5VbSHzmBBW00rDiF3qgryk=
+
+starterkit-mustache-bootstrap@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/starterkit-mustache-bootstrap/-/starterkit-mustache-bootstrap-0.1.1.tgz#1cc0b988a8e6fc084dbb9604bf166af17b4216e6"
+  integrity sha1-HMC5iKjm/AhNu5YEvxZq8XtCFuY=
+
+starterkit-mustache-foundation@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/starterkit-mustache-foundation/-/starterkit-mustache-foundation-0.1.1.tgz#083bf6c1cf6a605ce8729555d502726fa419fd01"
+  integrity sha1-CDv2wc9qYFzocpVV1QJyb6QZ/QE=
+
+starterkit-mustache-materialdesign@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/starterkit-mustache-materialdesign/-/starterkit-mustache-materialdesign-0.1.2.tgz#1806fa26c87a79ed343cffc139d215a634b7994a"
+  integrity sha1-GAb6Jsh6ee00PP/BOdIVpjS3mUo=
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -16247,6 +16293,13 @@ supports-color@^5.3.0, supports-color@^5.4.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  dependencies:
+    has-flag "^4.0.0"
+
 svg-baker-runtime@1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/svg-baker-runtime/-/svg-baker-runtime-1.4.1.tgz#d3f77dffdf1f1a8b8f1e84ef67d2c1b53d60d770"