@docmd/ui 0.5.0 → 0.5.2

package/README.md

@@ -7,7 +7,7 @@ Contains:
 - **Assets:** Core CSS and JavaScript.
 - **Icons:** SVG icon sets.
 
-## The docmd Ecosystem
+## The `docmd` Ecosystem
 
 `docmd` is a modular system. Here are the official packages:
 
@@ -22,6 +22,7 @@ Contains:
 
 **Plugins**
 *   [**@docmd/plugin-search**](https://www.npmjs.com/package/@docmd/plugin-search) - Offline full-text search.
+*   [**@docmd/plugin-pwa**](https://www.npmjs.com/package/@docmd/plugin-pwa) - Progressive Web App support.
 *   [**@docmd/plugin-mermaid**](https://www.npmjs.com/package/@docmd/plugin-mermaid) - Diagrams and flowcharts.
 *   [**@docmd/plugin-seo**](https://www.npmjs.com/package/@docmd/plugin-seo) - Meta tags and Open Graph data.
 *   [**@docmd/plugin-sitemap**](https://www.npmjs.com/package/@docmd/plugin-sitemap) - Automatic sitemap generation.

package/assets/css/docmd-main.css

@@ -427,7 +427,7 @@ body.sidebar-collapsed .main-content-wrapper {
     background-color: var(--header-bg);
     border-bottom: 1px solid var(--header-border);
     position: sticky;
-    top: 0;
+    top: var(--header-top-offset);
     z-index: 50;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
@@ -448,6 +448,265 @@ body.sidebar-collapsed .main-content-wrapper {
     gap: 5px
 }
 
+:root {
+    --menubar-h: 52px;
+    --header-h: 54px;
+
+    --fixed-top-offset: 0px;
+    --header-top-offset: 0px;
+    --sticky-top-offset: 0px;
+
+    --menubar-bg: var(--bg-color);
+    --menubar-border: var(--border-color);
+    --menubar-text: var(--text-color);
+    --menubar-link-hover-bg: var(--sidebar-link-active-bg);
+}
+
+body.has-menubar-top {
+    --fixed-top-offset: var(--menubar-h);
+    --header-top-offset: var(--menubar-h);
+    --sticky-top-offset: var(--menubar-h);
+    padding-top: var(--menubar-h);
+}
+
+body:not(.no-header) {
+    --sticky-top-offset: var(--header-h);
+}
+
+body.has-menubar-top:not(.no-header) {
+    --sticky-top-offset: calc(var(--menubar-h) + var(--header-h));
+}
+
+body.has-menubar-header {
+    --header-top-offset: var(--menubar-h);
+    --sticky-top-offset: var(--menubar-h);
+}
+
+body.has-menubar-header:not(.no-header) {
+    --sticky-top-offset: calc(var(--menubar-h) + var(--header-h));
+}
+
+html {
+    scroll-padding-top: calc(var(--sticky-top-offset) + 1.5rem);
+}
+
+.docmd-menubar {
+    z-index: 200;
+    height: var(--menubar-h);
+    background-color: var(--menubar-bg);
+    border-bottom: 1px solid var(--menubar-border);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    width: 100%;
+    box-sizing: border-box;
+    transition: background-color 0.3s;
+}
+
+.menubar-options {
+    margin-left: 0.5rem;
+    padding-left: 0.5rem;
+    border-left: 1px solid var(--menubar-border);
+    display: flex;
+    align-items: center;
+}
+
+body.has-menubar-top .docmd-menubar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+body.has-menubar-header .docmd-menubar {
+    position: sticky;
+    top: 0;
+    z-index: 150;
+}
+
+.menubar-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0 1.5rem;
+    gap: 1rem;
+}
+
+.menubar-left,
+.menubar-right {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-shrink: 0;
+}
+
+.menubar-brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    color: var(--text-heading);
+    font-weight: 700;
+    font-size: 1rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--ui-border-radius);
+    transition: opacity 0.2s;
+}
+
+.menubar-brand:hover {
+    opacity: 0.8;
+    text-decoration: none;
+}
+
+.menubar-brand-text {
+    white-space: nowrap;
+}
+
+.menubar-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.35rem 0.65rem;
+    border-radius: var(--ui-border-radius);
+    font-size: 0.875rem;
+    color: var(--menubar-text);
+    text-decoration: none;
+    transition: background-color 0.15s, color 0.15s;
+    white-space: nowrap;
+}
+
+.menubar-link:hover {
+    background-color: var(--menubar-link-hover-bg);
+    color: var(--text-heading);
+    text-decoration: none;
+}
+
+.menubar-icon {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+}
+
+.menubar-ext-icon {
+    width: 0.75em;
+    height: 0.75em;
+    opacity: 0.6;
+    flex-shrink: 0;
+}
+
+.menubar-dropdown {
+    position: relative;
+}
+
+.menubar-dropdown-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.35rem 0.65rem;
+    border-radius: var(--ui-border-radius);
+    font-size: 0.875rem;
+    color: var(--menubar-text);
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 0.15s, color 0.15s;
+    white-space: nowrap;
+}
+
+.menubar-dropdown-toggle:hover {
+    background-color: var(--menubar-link-hover-bg);
+    color: var(--text-heading);
+}
+
+.menubar-chevron {
+    width: 0.85em;
+    height: 0.85em;
+    opacity: 0.7;
+    transition: transform 0.2s ease;
+}
+
+.menubar-dropdown:hover .menubar-chevron,
+.menubar-dropdown:focus-within .menubar-chevron {
+    transform: rotate(180deg);
+}
+
+.menubar-dropdown-menu {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    min-width: 180px;
+    margin: 0;
+    padding: 0.25rem;
+    list-style: none;
+    background-color: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--ui-border-radius);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
+    z-index: 300;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
+}
+
+.menubar-dropdown-menu.menubar-dropdown-right {
+    left: auto;
+    right: 0;
+}
+
+.menubar-dropdown:hover .menubar-dropdown-menu,
+.menubar-dropdown:focus-within .menubar-dropdown-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.menubar-dropdown-menu li a {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.4rem 0.6rem;
+    font-size: 0.875rem;
+    color: var(--text-color);
+    text-decoration: none;
+    border-radius: 4px;
+    transition: background-color 0.15s, color 0.15s;
+}
+
+.menubar-dropdown-menu li a:hover {
+    background-color: var(--sidebar-link-active-bg);
+    color: var(--text-heading);
+}
+
+.sidebar {
+    top: var(--fixed-top-offset);
+    height: calc(100vh - var(--fixed-top-offset));
+}
+
+.toc-sidebar {
+    position: sticky;
+    top: calc(var(--sticky-top-offset) + 2rem);
+    width: 240px;
+    flex-shrink: 0;
+    margin: 1rem 0;
+}
+
+@media (max-width: 768px) {
+    .docmd-menubar {
+        padding: 0;
+    }
+
+    .menubar-brand-text {
+        display: none;
+    }
+
+    .menubar-link span,
+    .menubar-dropdown-toggle span:not(.menubar-chevron) {
+        display: none;
+    }
+}
+
 .docmd-options-menu {
     display: flex;
     align-items: center;
@@ -540,17 +799,12 @@ body.sidebar-collapsed .main-content-wrapper {
 /* --- Version Dropdown (Flat UI) --- */
 .sidebar-version-wrapper {
     padding: 0.25rem .5em;
-    border-bottom: 1px solid var(--border-color);
 }
 
 .sidebar-bottom-group.mt-auto {
     margin-top: auto;
 }
 
-.sidebar-bottom-group .sidebar-version-wrapper {
-    border-bottom: none;
-}
-
 .docmd-version-dropdown {
     position: relative;
     width: 100%;
@@ -659,7 +913,7 @@ body.sidebar-collapsed .main-content-wrapper {
 }
 
 .content-area {
-    padding: 0 2.5em 2em 2.5rem;
+    padding: 1rem 5%;
     max-width: 1200px;
     margin: 0 auto;
     width: 100%;
@@ -1251,15 +1505,6 @@ details[open]>.collapsible-summary .collapsible-arrow svg {
     background-color: rgba(59, 130, 246, 0.1)
 }
 
-.toc-sidebar {
-    position: -webkit-sticky;
-    position: sticky;
-    top: 2rem;
-    width: 240px;
-    flex-shrink: 0;
-    margin: 1rem 0
-}
-
 .toc-title {
     font-size: .85em;
     display: contents;
@@ -1984,6 +2229,7 @@ hr {
         width: 100%;
         height: auto;
         position: relative;
+        top: 0;
         border-right-width: medium;
         border-right-style: none;
         border-right-color: currentcolor;
@@ -2041,7 +2287,7 @@ hr {
     }
 
     .content-area {
-        padding: 15px
+        padding: 1.5rem 15px 15px
     }
 
     .page-navigation {

package/assets/js/docmd-main.js

@@ -18,7 +18,7 @@
  * --------------------------------------------------------------------
  */
 
-(function() {
+(function () {
 
   // 1. EVENT DELEGATION
   document.addEventListener('click', (e) => {
@@ -32,7 +32,7 @@
         item.classList.toggle('expanded', !isExpanded);
         item.setAttribute('aria-expanded', !isExpanded);
       }
-      if (navLabel.classList.contains('collapse-icon-wrapper')) return; 
+      if (navLabel.classList.contains('collapse-icon-wrapper')) return;
     }
 
     // Toggles
@@ -54,14 +54,14 @@
       const navItems = Array.from(tabsContainer.querySelectorAll('.docmd-tabs-nav-item'));
       const tabPanes = Array.from(tabsContainer.querySelectorAll('.docmd-tab-pane'));
       const index = navItems.indexOf(tabItem);
-      
+
       navItems.forEach(item => item.classList.remove('active'));
       tabPanes.forEach(pane => pane.classList.remove('active'));
-      
+
       tabItem.classList.add('active');
       if (tabPanes[index]) tabPanes[index].classList.add('active');
     }
-    
+
     // Version Dropdown Toggle
     const versionToggle = e.target.closest('.version-dropdown-toggle');
     if (versionToggle) {
@@ -75,28 +75,28 @@
     // Sticky Version Switching (Path Preservation)
     const versionLink = e.target.closest('.version-dropdown-item');
     if (versionLink) {
-        const targetRoot = versionLink.dataset.versionRoot;
-        // Use global fallback if undefined (e.g. on 404 pages)
-        const currentRoot = window.DOCMD_VERSION_ROOT || '/'; 
-        
-        if (targetRoot && window.location.pathname) {
-            try {
-                let currentPath = window.location.pathname;
-                const normCurrentRoot = currentRoot.endsWith('/') ? currentRoot : currentRoot + '/';
-                
-                // Only try sticky if we are actually INSIDE the known version path
-                if (currentPath.startsWith(normCurrentRoot)) {
-                    e.preventDefault();
-                    const suffix = currentPath.substring(normCurrentRoot.length);
-                    const normTargetRoot = targetRoot.endsWith('/') ? targetRoot : targetRoot + '/';
-                    window.location.href = normTargetRoot + suffix + window.location.hash;
-                    return;
-                }
-            } catch(e) {
-                // Ignore errors, let default click happen
-            }
+      const targetRoot = versionLink.dataset.versionRoot;
+      // Use global fallback if undefined (e.g. on 404 pages)
+      const currentRoot = window.DOCMD_VERSION_ROOT || '/';
+
+      if (targetRoot && window.location.pathname) {
+        try {
+          let currentPath = window.location.pathname;
+          const normCurrentRoot = currentRoot.endsWith('/') ? currentRoot : currentRoot + '/';
+
+          // Only try sticky if we are actually INSIDE the known version path
+          if (currentPath.startsWith(normCurrentRoot)) {
+            e.preventDefault();
+            const suffix = currentPath.substring(normCurrentRoot.length);
+            const normTargetRoot = targetRoot.endsWith('/') ? targetRoot : targetRoot + '/';
+            window.location.href = normTargetRoot + suffix + window.location.hash;
+            return;
+          }
+        } catch (e) {
+          // Ignore errors, let default click happen
         }
-        // If sticky logic skipped (e.g. on 404 page or outside root), default <a> click handles it
+      }
+      // If sticky logic skipped (e.g. on 404 page or outside root), default <a> click handles it
     }
 
     // Close Dropdown if clicked outside
@@ -128,15 +128,15 @@
   function injectCopyButtons() {
     if (document.body.dataset.copyCodeEnabled !== 'true') return;
     const svg = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>`;
-    
+
     document.querySelectorAll('pre').forEach(preElement => {
-      if (preElement.closest('.code-wrapper')) return; 
+      if (preElement.closest('.code-wrapper')) return;
       const wrapper = document.createElement('div');
       wrapper.className = 'code-wrapper';
       wrapper.style.position = 'relative';
       preElement.parentNode.insertBefore(wrapper, preElement);
       wrapper.appendChild(preElement);
-      
+
       const copyButton = document.createElement('button');
       copyButton.className = 'copy-code-button';
       copyButton.innerHTML = svg;
@@ -150,7 +150,7 @@
     const tocLinks = document.querySelectorAll('.toc-link');
     const headings = document.querySelectorAll('.main-content h2, .main-content h3, .main-content h4');
     const tocContainer = document.querySelector('.toc-list');
-    
+
     if (tocLinks.length === 0 || headings.length === 0) return;
 
     scrollObserver = new IntersectionObserver((entries) => {
@@ -159,7 +159,7 @@
           tocLinks.forEach(link => link.classList.remove('active'));
           const id = entry.target.getAttribute('id');
           const activeLink = document.querySelector(`.toc-link[href="#${id}"]`);
-          
+
           if (activeLink) {
             activeLink.classList.add('active');
             if (tocContainer) {
@@ -197,9 +197,9 @@
 
     // Intent-based Hover Prefetching
     document.addEventListener('mouseover', (e) => {
-      const link = e.target.closest('.sidebar-nav a, .page-navigation a');
+      const link = e.target.closest('.sidebar-nav a, .page-navigation a, .page-footer a, .main-content a');
       if (!link || link.target === '_blank' || link.hasAttribute('download')) return;
-      
+
       const url = new URL(link.href).href;
       if (new URL(url).origin !== location.origin) return;
       if (pageCache.has(url)) return;
@@ -207,10 +207,10 @@
       // Wait 65ms to ensure the user actually intends to click
       clearTimeout(prefetchTimer);
       prefetchTimer = setTimeout(() => {
-          pageCache.set(url, fetch(url).then(res => {
-              if (!res.ok) throw new Error('Prefetch failed');
-              return { html: res.text(), finalUrl: res.url };
-          }).catch(() => pageCache.delete(url)));
+        pageCache.set(url, fetch(url).then(res => {
+          if (!res.ok) throw new Error('Prefetch failed');
+          return { html: res.text(), finalUrl: res.url };
+        }).catch(() => pageCache.delete(url)));
       }, 65);
     });
 
@@ -222,42 +222,42 @@
 
       if (e.target.closest('[data-spa-ignore]')) return;
 
-      const link = e.target.closest('.sidebar-nav a, .page-navigation a');
+      const link = e.target.closest('.sidebar-nav a, .page-navigation a, .page-footer a, .main-content a');
       if (!link || link.target === '_blank' || link.hasAttribute('download')) return;
-      
+
       const url = new URL(link.href);
       if (url.origin !== location.origin) return;
       if (url.pathname === window.location.pathname && url.hash) return;
-      
+
       e.preventDefault();
       await navigateTo(url.href);
     });
 
     window.addEventListener('popstate', () => {
-      if (window.location.pathname === currentPath) return; 
+      if (window.location.pathname === currentPath) return;
       navigateTo(window.location.href, false);
     });
 
     async function navigateTo(url, pushHistory = true) {
       const layout = document.querySelector('.content-layout');
-      
+
       try {
         if (layout) layout.style.minHeight = layout.getBoundingClientRect().height + 'px';
-        
+
         let data;
         if (pageCache.has(url)) {
-            data = await pageCache.get(url);
-            data.html = await data.html; 
+          data = await pageCache.get(url);
+          data.html = await data.html;
         } else {
-            const res = await fetch(url);
-            if (!res.ok) throw new Error('Fetch failed');
-            data = { html: await res.text(), finalUrl: res.url };
-            pageCache.set(url, Promise.resolve(data));
+          const res = await fetch(url);
+          if (!res.ok) throw new Error('Fetch failed');
+          data = { html: await res.text(), finalUrl: res.url };
+          pageCache.set(url, Promise.resolve(data));
         }
 
         const finalUrl = data.finalUrl;
         const html = data.html;
-        
+
         const parser = new DOMParser();
         const doc = parser.parseFromString(html, 'text/html');
 
@@ -271,58 +271,62 @@
         const newAssets = Array.from(doc.head.querySelectorAll(assetSelectors));
 
         newAssets.forEach((newAsset, index) => {
-            if (oldAssets[index]) {
-                if (oldAssets[index].getAttribute('href') !== newAsset.getAttribute('href')) {
-                    oldAssets[index].setAttribute('href', newAsset.getAttribute('href'));
-                }
-            } else {
-                document.head.appendChild(newAsset.cloneNode(true));
+          if (oldAssets[index]) {
+            if (oldAssets[index].getAttribute('href') !== newAsset.getAttribute('href')) {
+              oldAssets[index].setAttribute('href', newAsset.getAttribute('href'));
             }
+          } else {
+            document.head.appendChild(newAsset.cloneNode(true));
+          }
         });
 
         // Sync Sidebar State
         const oldLis = Array.from(document.querySelectorAll('.sidebar-nav li'));
         const newLis = Array.from(doc.querySelectorAll('.sidebar-nav li'));
-        
+
         oldLis.forEach((oldLi, i) => {
-            const newLi = newLis[i];
-            if (newLi) {
-                oldLi.classList.toggle('active', newLi.classList.contains('active'));
-                oldLi.classList.toggle('active-parent', newLi.classList.contains('active-parent'));
-
-                if (newLi.classList.contains('expanded')) {
-                    oldLi.classList.add('expanded');
-                    oldLi.setAttribute('aria-expanded', 'true');
-                }
-
-                const oldA = oldLi.querySelector('a');
-                const newA = newLi.querySelector('a');
-                if (oldA && newA) {
-                    oldA.setAttribute('href', newA.getAttribute('href'));
-                    oldA.classList.toggle('active', newA.classList.contains('active'));
-                }
+          const newLi = newLis[i];
+          if (newLi) {
+            oldLi.classList.toggle('active', newLi.classList.contains('active'));
+            oldLi.classList.toggle('active-parent', newLi.classList.contains('active-parent'));
+
+            if (newLi.classList.contains('expanded')) {
+              oldLi.classList.add('expanded');
+              oldLi.setAttribute('aria-expanded', 'true');
+            }
+
+            const oldA = oldLi.querySelector('a');
+            const newA = newLi.querySelector('a');
+            if (oldA && newA) {
+              oldA.setAttribute('href', newA.getAttribute('href'));
+              oldA.classList.toggle('active', newA.classList.contains('active'));
             }
+          }
         });
 
-        const selectorsToSwap =[
-          '.content-layout', 
-          '.page-header .header-title', 
-          '.page-footer', 
+        const selectorsToSwap = [
+          '.content-layout',
+          '.page-header .header-title',
+          '.page-footer',
           '.footer-complete',
           '.page-footer-actions'
         ];
 
         selectorsToSwap.forEach(selector => {
-            const oldEl = document.querySelector(selector);
-            const newEl = doc.querySelector(selector);
-            if (oldEl && newEl) oldEl.innerHTML = newEl.innerHTML;
+          const oldEl = document.querySelector(selector);
+          const newEl = doc.querySelector(selector);
+          if (oldEl && newEl) oldEl.innerHTML = newEl.innerHTML;
         });
 
         const hash = new URL(finalUrl).hash;
         if (hash) {
+          try {
             document.querySelector(hash)?.scrollIntoView();
+          } catch (e) {
+            document.getElementById(hash.substring(1))?.scrollIntoView();
+          }
         } else {
-            window.scrollTo(0, 0);
+          window.scrollTo(0, 0);
         }
 
         injectCopyButtons();
@@ -333,11 +337,11 @@
         document.dispatchEvent(new CustomEvent('docmd:page-mounted', { detail: { url: finalUrl } }));
 
         setTimeout(() => {
-            const newLayout = document.querySelector('.content-layout');
-            if (newLayout) newLayout.style.minHeight = '';
+          const newLayout = document.querySelector('.content-layout');
+          if (newLayout) newLayout.style.minHeight = '';
         }, 100);
 
-      } catch(e) {
+      } catch (e) {
         window.location.assign(url);
       }
     }
@@ -346,21 +350,21 @@
   // 4. BOOTSTRAP
   document.addEventListener('DOMContentLoaded', () => {
     if (localStorage.getItem('docmd-sidebar-collapsed') === 'true') {
-        document.body.classList.add('sidebar-collapsed');
+      document.body.classList.add('sidebar-collapsed');
     }
-    
+
     document.querySelectorAll('.theme-toggle-button').forEach(btn => {
       btn.addEventListener('click', () => {
         const t = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
         document.documentElement.setAttribute('data-theme', t);
         document.body.setAttribute('data-theme', t);
         localStorage.setItem('docmd-theme', t);
-        
+
         const lightLink = document.getElementById('hljs-light');
         const darkLink = document.getElementById('hljs-dark');
         if (lightLink && darkLink) {
-            lightLink.disabled = t === 'dark';
-            darkLink.disabled = t === 'light';
+          lightLink.disabled = t === 'dark';
+          darkLink.disabled = t === 'light';
         }
       });
     });
@@ -368,16 +372,29 @@
     injectCopyButtons();
     initializeScrollSpy();
     initializeSPA();
-    
+
     setTimeout(() => {
-        const activeNav = document.querySelector('.sidebar-nav a.active');
-        const sidebarNav = document.querySelector('.sidebar-nav');
-        if (activeNav && sidebarNav) {
-            sidebarNav.scrollTo({ top: activeNav.offsetTop - (sidebarNav.clientHeight / 2), behavior: 'instant' });
-        }
-        if (window.location.hash) {
-            document.querySelector(window.location.hash)?.scrollIntoView();
+      // PWA Unregistration Safety Net:
+      // If the PWA plugin is removed from docmd.config.js, the <link rel="manifest"> disappears.
+      // We explicitly unregister all ghost service workers to safely kill the offline cache.
+      if ('serviceWorker' in navigator && !document.querySelector('link[rel="manifest"]')) {
+        navigator.serviceWorker.getRegistrations().then(registrations => {
+          registrations.forEach(reg => reg.unregister().catch(() => { }));
+        });
+      }
+
+      const activeNav = document.querySelector('.sidebar-nav a.active');
+      const sidebarNav = document.querySelector('.sidebar-nav');
+      if (activeNav && sidebarNav) {
+        sidebarNav.scrollTo({ top: activeNav.offsetTop - (sidebarNav.clientHeight / 2), behavior: 'instant' });
+      }
+      if (window.location.hash) {
+        try {
+          document.querySelector(window.location.hash)?.scrollIntoView();
+        } catch (e) {
+          document.getElementById(window.location.hash.substring(1))?.scrollIntoView();
         }
+      }
     }, 100);
   });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@docmd/ui",
-  "version": "0.5.0",
-  "description": "Base UI templates and assets for docmd",
+  "version": "0.5.2",
+  "description": "Base UI templates and assets for docmd.",
   "main": "index.js",
   "files": [
     "templates",

package/templates/layout.ejs

@@ -8,189 +8,225 @@
 
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="generator" content="docmd v0.5.x">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <% 
-       let versionRoot = '/';
-       let siteRoot = relativePathToRoot;
-       
-       if (config.versions?.current && config._activeVersion?.id) {
-           const isSubVersion = config.versions.current !== config._activeVersion.id;
-           versionRoot = isSubVersion ? '/' + config._activeVersion.id + '/' : '/';
-           
-           // If we are in a sub-version (v04/), the relativePathToRoot takes us to /v04/.
-           // We need to go up one more level to reach the true site root.
-           if (isSubVersion) {
-               siteRoot = (relativePathToRoot === './' ? '' : relativePathToRoot) + '../';
-           }
-       }
-       
-       if (locals.isOfflineMode) {
-           versionRoot = '';
-       }
-    %>
-    <script>
-        var root = "<%= relativePathToRoot %>";
-        if (root && !root.endsWith('/')) root += '/';
-        if (root === '') root = './';
-        window.DOCMD_ROOT = root; // Context Root (Assets)
-        
-        var siteRoot = "<%= siteRoot %>";
-        if (siteRoot && !siteRoot.endsWith('/')) siteRoot += '/';
-        if (siteRoot === '') siteRoot = './';
-        window.DOCMD_SITE_ROOT = siteRoot; // True Site Root (Search Index)
-        
-        window.DOCMD_DEFAULT_MODE = "<%= defaultMode %>";
-        window.DOCMD_VERSION_ROOT = "<%- versionRoot %>";
-    </script>
-    <title><%= pageTitle %></title>
-    <%- faviconLinkHtml || '' %>
-    <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-main.css?v=<%= buildHash %>">
-    <% if (config.theme?.codeHighlight !== false) { 
-       const isDarkDefault = defaultMode === 'dark';
-    %>
-    <link rel="stylesheet" 
-          href="<%= relativePathToRoot %>assets/css/docmd-highlight-light.css?v=<%= buildHash %>" 
-          id="hljs-light" 
-          <%= isDarkDefault ? 'disabled' : '' %>>
-          
-    <link rel="stylesheet" 
-          href="<%= relativePathToRoot %>assets/css/docmd-highlight-dark.css?v=<%= buildHash %>" 
-          id="hljs-dark" 
-          <%= isDarkDefault ? '' : 'disabled' %>>
-    <% } %>
-    <%- pluginHeadScriptsHtml || '' %>
-    <% (customCssFiles || []).forEach(cssFile => { %>
-    <link rel="stylesheet" href="<%= relativePathToRoot %><%- cssFile.startsWith('/') ? cssFile.substring(1) : cssFile %>?v=<%= buildHash %>">
-    <% }); %>
-    <%- themeInitScript %>
+    <% let versionRoot='/' ; let siteRoot=relativePathToRoot; if (config.versions?.current && config._activeVersion?.id)
+        { const isSubVersion=config.versions.current !==config._activeVersion.id; versionRoot=isSubVersion ? '/' +
+        config._activeVersion.id + '/' : '/' ; if (isSubVersion) { siteRoot=(relativePathToRoot==='./' ? '' :
+        relativePathToRoot) + '../' ; } } if (locals.isOfflineMode) { versionRoot='' ; } %>
+        <script>
+            var root = "<%= relativePathToRoot %>";
+            if (root && !root.endsWith('/')) root += '/';
+            if (root === '') root = './';
+            window.DOCMD_ROOT = root;
+
+            var siteRoot = "<%= siteRoot %>";
+            if (siteRoot && !siteRoot.endsWith('/')) siteRoot += '/';
+            if (siteRoot === '') siteRoot = './';
+            window.DOCMD_SITE_ROOT = siteRoot;
+
+            window.DOCMD_DEFAULT_MODE = "<%= defaultMode %>";
+            window.DOCMD_VERSION_ROOT = "<%- versionRoot %>";
+        </script>
+        <title>
+            <%= pageTitle %>
+        </title>
+        <%- faviconLinkHtml || '' %>
+            <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-main.css?v=<%= buildHash %>">
+            <% if (config.theme?.codeHighlight !==false) { const isDarkDefault=defaultMode==='dark' ; %>
+                <link rel="stylesheet"
+                    href="<%= relativePathToRoot %>assets/css/docmd-highlight-light.css?v=<%= buildHash %>"
+                    id="hljs-light" <%=isDarkDefault ? 'disabled' : '' %>>
+
+                <link rel="stylesheet"
+                    href="<%= relativePathToRoot %>assets/css/docmd-highlight-dark.css?v=<%= buildHash %>"
+                    id="hljs-dark" <%=isDarkDefault ? '' : 'disabled' %>>
+                <% } %>
+                    <%- pluginHeadScriptsHtml || '' %>
+                        <% (customCssFiles || []).forEach(cssFile=> { %>
+                            <link rel="stylesheet"
+                                href="<%= relativePathToRoot %><%- cssFile.startsWith('/') ? cssFile.substring(1) : cssFile %>?v=<%= buildHash %>">
+                            <% }); %>
+                                <%- themeInitScript %>
 </head>
-<body class="<%= sidebarConfig?.enabled === false ? 'no-sidebar' : (sidebarConfig?.collapsible ? 'sidebar-collapsible' : 'sidebar-not-collapsible') %>" 
-data-default-collapsed="<%= sidebarConfig?.defaultCollapsed %>" 
-data-copy-code-enabled="<%= config.copyCode === true %>"
-data-spa-enabled="<%= config.layout?.spa !== false %>">
-    
+
+<body
+    class="<%= sidebarConfig?.enabled === false ? 'no-sidebar' : (sidebarConfig?.collapsible ? 'sidebar-collapsible' : 'sidebar-not-collapsible') %><%= (locals.menubarConfig && menubarConfig?.enabled !== false) ? ' has-menubar has-menubar-' + (menubarConfig.position || 'top') : '' %><%= headerConfig?.enabled === false ? ' no-header' : '' %>"
+    data-default-collapsed="<%= sidebarConfig?.defaultCollapsed %>"
+    data-copy-code-enabled="<%= config.copyCode === true %>" data-spa-enabled="<%= config.layout?.spa !== false %>">
+
     <a href="#main-content" class="skip-link">Skip to main content</a>
 
-    <% if (sidebarConfig?.enabled !== false) { %>
-        <aside class="sidebar">
-            <div class="sidebar-header">
-                <% if (logo && logo.light && logo.dark) { %>
-                <a href="<%= logo.href || relativePathToRoot %>" class="logo-link">
-                    <img src="<%= relativePathToRoot %><%- logo.light.startsWith('/') ? logo.light.substring(1) : logo.light %>" alt="<%= logo.alt || siteTitle %>" class="logo-light" <% if (logo.height) { %>style="height: <%= logo.height %>;"<% } %>>
-                    <img src="<%= relativePathToRoot %><%- logo.dark.startsWith('/') ? logo.dark.substring(1) : logo.dark %>" alt="<%= logo.alt || siteTitle %>" class="logo-dark" <% if (logo.height) { %>style="height: <%= logo.height %>;"<% } %>>
-                </a>
-                <% } else { %>
-                <h1><a href="<%= relativePathToRoot %>index.html"><%= siteTitle %></a></h1>
-                <% } %>
-                <span class="mobile-view sidebar-menu-button float-right">
-                    <%- renderIcon("menu") %>
-                </span>
-            </div>
-
-            <div class="sidebar-top-group">
-                <% if (locals.optionsMenu && optionsMenu.position === 'sidebar-top') { %>
-                    <div class="sidebar-options-wrapper">
-                        <%- include('partials/options-menu', { optionsMenu }) %>
-                    </div>
-                <% } %>
-                
-                <% if (config.versions && config.versions.position === 'sidebar-top') { %>
-                    <div class="sidebar-version-wrapper">
-                        <%- include('partials/version-dropdown', { versions: config.versions, activeVersion: config._activeVersion, relativePathToRoot }) %>
-                    </div>
-                <% } %>
-            </div>
+    <% if (locals.menubarConfig && menubarConfig?.enabled !==false && menubarConfig.position !=='header' ) { %>
+        <%- include('partials/menubar', { menubarConfig, relativePathToRoot, renderIcon, optionsMenu: locals.optionsMenu
+            }) %>
+            <% } %>
 
-            <%- navigationHtml %>
+                <% if (sidebarConfig?.enabled !==false) { %>
+                    <aside class="sidebar">
+                        <div class="sidebar-header">
+                            <% if (logo && logo.light && logo.dark) { %>
+                                <a href="<%= logo.href || relativePathToRoot %>" class="logo-link">
+                                    <img src="<%= relativePathToRoot %><%- logo.light.startsWith('/') ? logo.light.substring(1) : logo.light %>"
+                                        alt="<%= logo.alt || siteTitle %>" class="logo-light" <% if (logo.height) {
+                                        %>style="height: <%= logo.height %>;"<% } %>>
+                                            <img src="<%= relativePathToRoot %><%- logo.dark.startsWith('/') ? logo.dark.substring(1) : logo.dark %>"
+                                                alt="<%= logo.alt || siteTitle %>" class="logo-dark" <% if (logo.height)
+                                                { %>style="height: <%= logo.height %>;"<% } %>>
+                                </a>
+                                <% } else { %>
+                                    <h1><a href="<%= relativePathToRoot %>index.html">
+                                            <%= siteTitle %>
+                                        </a></h1>
+                                    <% } %>
+                                        <span class="mobile-view sidebar-menu-button float-right">
+                                            <%- renderIcon("menu") %>
+                                        </span>
+                        </div>
 
-            <div class="sidebar-bottom-group mt-auto">
-                <% if (config.versions && config.versions.position === 'sidebar-bottom') { %>
-                    <div class="sidebar-version-wrapper">
-                        <%- include('partials/version-dropdown', { versions: config.versions, activeVersion: config._activeVersion, relativePathToRoot }) %>
-                    </div>
-                <% } %>
+                        <div class="sidebar-top-group">
+                            <% if (locals.optionsMenu && optionsMenu.position==='sidebar-top' ) { %>
+                                <div class="sidebar-options-wrapper">
+                                    <%- include('partials/options-menu', { optionsMenu }) %>
+                                </div>
+                                <% } %>
 
-                <% if (locals.optionsMenu && optionsMenu.position === 'sidebar-bottom') { %>
-                    <div class="sidebar-options-wrapper">
-                        <%- include('partials/options-menu', { optionsMenu }) %>
-                    </div>
-                <% } %>
-            </div>
-        </aside>
-    <% } %>
-
-    <div class="main-content-wrapper">
-        <% if (headerConfig?.enabled !== false) { %>
-        <header class="page-header">
-            <div class="header-left">
-                <% if (sidebarConfig?.collapsible) { %>
-                <button id="sidebar-toggle-button" class="sidebar-toggle-button" aria-label="Toggle Sidebar">
-                    <%- renderIcon('panel-left-close') %>
-                </button>
-                <% } %>
-                <span class="header-title"><%= pageTitle %></span>
-            </div>
-            
-            <div class="header-right">
-                <% if (optionsMenu?.position === 'header') { %>
-                    <%- include('partials/options-menu', { optionsMenu }) %>
-                <% } %>
-            </div>
-        </header>
-        <% } %>
-
-        <main class="content-area" id="main-content">
-            <div class="content-layout">
-                <div class="main-content">
-                    <% if (headerConfig?.enabled === false) { %>
-                        <h1><%= pageTitle %></h1>
-                    <% } %>
-                    
-                    <%- content %>
-
-                    <% if (config.pageNavigation && (prevPage || nextPage)) { %>
-                    <div class="page-navigation">
-                        <% if (prevPage) { %>
-                        <a href="<%= prevPage.url %>" class="prev-page">
-                            <%- renderIcon('arrow-left', { class: 'page-nav-icon' }) %>
-                            <span><small>Previous</small><strong><%= prevPage.title %></strong></span>
-                        </a>
-                        <% } else { %><div class="prev-page-placeholder"></div><% } %>
-                        <% if (nextPage) { %>
-                        <a href="<%= nextPage.url %>" class="next-page">
-                            <span><small>Next</small><strong><%= nextPage.title %></strong></span>
-                            <%- renderIcon('arrow-right', { class: 'page-nav-icon' }) %>
-                        </a>
-                        <% } else { %><div class="next-page-placeholder"></div><% } %>
-                    </div>
+                                    <% if (config.versions && config.versions.position==='sidebar-top' ) { %>
+                                        <div class="sidebar-version-wrapper">
+                                            <%- include('partials/version-dropdown', { versions: config.versions,
+                                                activeVersion: config._activeVersion, relativePathToRoot }) %>
+                                        </div>
+                                        <% } %>
+                        </div>
+
+                        <%- navigationHtml %>
+
+                            <div class="sidebar-bottom-group mt-auto">
+                                <% if (config.versions && config.versions.position==='sidebar-bottom' ) { %>
+                                    <div class="sidebar-version-wrapper">
+                                        <%- include('partials/version-dropdown', { versions: config.versions,
+                                            activeVersion: config._activeVersion, relativePathToRoot }) %>
+                                    </div>
+                                    <% } %>
+
+                                        <% if (locals.optionsMenu && optionsMenu.position==='sidebar-bottom' ) { %>
+                                            <div class="sidebar-options-wrapper">
+                                                <%- include('partials/options-menu', { optionsMenu }) %>
+                                            </div>
+                                            <% } %>
+                            </div>
+                    </aside>
                     <% } %>
-                </div>
-
-                <div class="toc-sidebar">
-                    <%- include('toc', { content, headings, navigationHtml, isActivePage }) %>
-                </div>
-            </div>
-
-            <div class="page-footer-actions">
-                <% if (locals.editUrl) { %>
-                <a href="<%= editUrl %>" target="_blank" rel="noopener noreferrer" class="edit-link">
-                    <%- renderIcon('pencil') %> <%= editLinkText %>
-                </a>
-                <% } %>
-            </div>
-        </main>
-
-        <%- include('partials/footer', { footerConfig, config, relativePathToRoot, logo, siteTitle, footerHtml }) %>
-    </div>
-
-    <script src="<%= relativePathToRoot %>assets/js/docmd-main.js?v=<%= buildHash %>"></script>
-    <%- pluginBodyScriptsHtml || '' %>
-    <% (customJsFiles || []).forEach(jsFile => { 
-       if (jsFile && jsFile.trim() !== '') { %>
-    <script src="<%= relativePathToRoot %><%- jsFile.startsWith('/') ? jsFile.substring(1) : jsFile %>?v=<%= buildHash %>"></script>
-    <% } }); %>
+
+                        <div class="main-content-wrapper">
+                            <% if (locals.menubarConfig && menubarConfig?.enabled !==false &&
+                                menubarConfig.position==='header' ) { %>
+                                <%- include('partials/menubar', { menubarConfig, relativePathToRoot, renderIcon,
+                                    optionsMenu: locals.optionsMenu }) %>
+                                    <% } %>
+                                        <% if (headerConfig?.enabled !==false) { %>
+                                            <header class="page-header">
+                                                <div class="header-left">
+                                                    <% if (sidebarConfig?.collapsible) { %>
+                                                        <button id="sidebar-toggle-button" class="sidebar-toggle-button"
+                                                            aria-label="Toggle Sidebar">
+                                                            <%- renderIcon('panel-left-close') %>
+                                                        </button>
+                                                        <% } %>
+                                                            <span class="header-title">
+                                                                <%= pageTitle %>
+                                                            </span>
+                                                </div>
+
+                                                <div class="header-right">
+                                                    <% if (optionsMenu?.position==='header' ) { %>
+                                                        <%- include('partials/options-menu', { optionsMenu }) %>
+                                                            <% } %>
+                                                </div>
+                                            </header>
+                                            <% } %>
+
+                                                <main class="content-area" id="main-content">
+                                                    <div class="content-layout">
+                                                        <div class="main-content">
+                                                            <% if (headerConfig?.enabled===false) { %>
+                                                                <h1>
+                                                                    <%= pageTitle %>
+                                                                </h1>
+                                                                <% } %>
+
+                                                                    <%- content %>
+
+                                                                        <% if (config.pageNavigation && (prevPage ||
+                                                                            nextPage)) { %>
+                                                                            <div class="page-navigation">
+                                                                                <% if (prevPage) { %>
+                                                                                    <a href="<%= prevPage.url %>"
+                                                                                        class="prev-page">
+                                                                                        <%- renderIcon('arrow-left', {
+                                                                                            class: 'page-nav-icon' }) %>
+                                                                                            <span><small>Previous</small><strong>
+                                                                                                    <%= prevPage.title
+                                                                                                        %>
+                                                                                                </strong></span>
+                                                                                    </a>
+                                                                                    <% } else { %>
+                                                                                        <div
+                                                                                            class="prev-page-placeholder">
+                                                                                        </div>
+                                                                                        <% } %>
+                                                                                            <% if (nextPage) { %>
+                                                                                                <a href="<%= nextPage.url %>"
+                                                                                                    class="next-page">
+                                                                                                    <span><small>Next</small><strong>
+                                                                                                            <%= nextPage.title
+                                                                                                                %>
+                                                                                                        </strong></span>
+                                                                                                    <%- renderIcon('arrow-right',
+                                                                                                        {
+                                                                                                        class: 'page-nav-icon'
+                                                                                                        }) %>
+                                                                                                </a>
+                                                                                                <% } else { %>
+                                                                                                    <div
+                                                                                                        class="next-page-placeholder">
+                                                                                                    </div>
+                                                                                                    <% } %>
+                                                                            </div>
+                                                                            <% } %>
+                                                        </div>
+
+                                                        <div class="toc-sidebar">
+                                                            <%- include('toc', { content, headings, navigationHtml,
+                                                                isActivePage }) %>
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="page-footer-actions">
+                                                        <% if (locals.editUrl) { %>
+                                                            <a href="<%= editUrl %>" target="_blank"
+                                                                rel="noopener noreferrer" class="edit-link">
+                                                                <%- renderIcon('pencil') %>
+                                                                    <%= editLinkText %>
+                                                            </a>
+                                                            <% } %>
+                                                    </div>
+                                                </main>
+
+                                                <%- include('partials/footer', { footerConfig, config,
+                                                    relativePathToRoot, logo, siteTitle, footerHtml }) %>
+                        </div>
+
+                        <script src="<%= relativePathToRoot %>assets/js/docmd-main.js?v=<%= buildHash %>"></script>
+                        <%- pluginBodyScriptsHtml || '' %>
+                            <% (customJsFiles || []).forEach(jsFile=> {
+                                if (jsFile && jsFile.trim() !== '') { %>
+                                <script
+                                    src="<%= relativePathToRoot %><%- jsFile.startsWith('/') ? jsFile.substring(1) : jsFile %>?v=<%= buildHash %>"></script>
+                                <% } }); %>
 </body>
+
 </html>

package/templates/partials/menubar.ejs

@@ -0,0 +1,129 @@
+<%# ---------------------------------------------------------------
+  # docmd : the minimalist, zero-config documentation generator.
+  # @website https://docmd.io
+  # [docmd-source] - Please do not remove this header.
+  # ---------------------------------------------------------------
+%>
+
+<% function menubarHref(item) { if (!item.url) return '#' ; if (item.external || item.url.startsWith('http')) return
+  item.url; let clean=item.url.replace(/^\//, '' ); return relativePathToRoot + clean; } function menubarTarget(item)
+  { return (item.external || (item.url && item.url.startsWith('http'))) ? ' target="_blank" rel="noopener noreferrer"'
+  : '' ; } %>
+
+  <div class="docmd-menubar">
+    <div class="menubar-inner">
+      <div class="menubar-left">
+      <% if (menubarConfig.left && menubarConfig.left.length> 0) { %>
+          <% menubarConfig.left.forEach(item=> { %>
+            <% if (item.type==='title' ) { %>
+              <a href="<%= menubarHref(item) %>" class="menubar-brand" <%- menubarTarget(item) %>>
+                <% if (item.icon) { %>
+                  <%- renderIcon(item.icon, { class: 'menubar-icon' }) %>
+                    <% } %>
+                      <% if (item.text) { %>
+                        <span class="menubar-brand-text">
+                          <%= item.text %>
+                        </span>
+                        <% } %>
+              </a>
+              <% } else if (item.type==='dropdown' ) { %>
+                <div class="menubar-dropdown">
+                  <button class="menubar-dropdown-toggle" type="button" aria-expanded="false">
+                    <% if (item.icon) { %>
+                      <%- renderIcon(item.icon, { class: 'menubar-icon' }) %>
+                        <% } %>
+                          <span>
+                            <%= item.text %>
+                          </span>
+                          <%- renderIcon('chevron-down', { class: 'menubar-chevron' }) %>
+                  </button>
+                  <ul class="menubar-dropdown-menu">
+                    <% if (item.items && item.items.length> 0) { %>
+                      <% item.items.forEach(sub=> { %>
+                        <li>
+                          <a href="<%= menubarHref(sub) %>" <%- menubarTarget(sub) %>>
+                            <% if (sub.icon) { %>
+                              <%- renderIcon(sub.icon, { class: 'menubar-icon' }) %>
+                                <% } %>
+                                  <%= sub.text %>
+                                    <% if (sub.external || (sub.url && sub.url.startsWith('http'))) { %>
+                                      <%- renderIcon('external-link', { class: 'menubar-ext-icon' }) %>
+                                        <% } %>
+                          </a>
+                        </li>
+                        <% }) %>
+                          <% } %>
+                  </ul>
+                </div>
+                <% } else { %>
+                  <a href="<%= menubarHref(item) %>" class="menubar-link" <%- menubarTarget(item) %>>
+                    <% if (item.icon) { %>
+                      <%- renderIcon(item.icon, { class: 'menubar-icon' }) %>
+                        <% } %>
+                          <span>
+                            <%= item.text %>
+                          </span>
+                          <% if (item.external || (item.url && item.url.startsWith('http'))) { %>
+                            <%- renderIcon('external-link', { class: 'menubar-ext-icon' }) %>
+                              <% } %>
+                  </a>
+                  <% } %>
+                    <% }) %>
+        </div>
+        <% } %>
+        </div>
+        <div class="menubar-right">
+            <% if (menubarConfig.right && menubarConfig.right.length> 0) { %>
+              <% menubarConfig.right.forEach(item=> { %>
+                <% if (item.type==='dropdown' ) { %>
+                  <div class="menubar-dropdown">
+                    <button class="menubar-dropdown-toggle" type="button" aria-expanded="false">
+                      <% if (item.icon) { %>
+                        <%- renderIcon(item.icon, { class: 'menubar-icon' }) %>
+                          <% } %>
+                            <span>
+                              <%= item.text %>
+                            </span>
+                            <%- renderIcon('chevron-down', { class: 'menubar-chevron' }) %>
+                    </button>
+                    <ul class="menubar-dropdown-menu menubar-dropdown-right">
+                      <% if (item.items && item.items.length> 0) { %>
+                        <% item.items.forEach(sub=> { %>
+                          <li>
+                            <a href="<%= menubarHref(sub) %>" <%- menubarTarget(sub) %>>
+                              <% if (sub.icon) { %>
+                                <%- renderIcon(sub.icon, { class: 'menubar-icon' }) %>
+                                  <% } %>
+                                    <%= sub.text %>
+                                      <% if (sub.external || (sub.url && sub.url.startsWith('http'))) { %>
+                                        <%- renderIcon('external-link', { class: 'menubar-ext-icon' }) %>
+                                          <% } %>
+                            </a>
+                          </li>
+                          <% }) %>
+                            <% } %>
+                    </ul>
+                  </div>
+                  <% } else { %>
+                    <a href="<%= menubarHref(item) %>" class="menubar-link" <%- menubarTarget(item) %>>
+                      <% if (item.icon) { %>
+                        <%- renderIcon(item.icon, { class: 'menubar-icon' }) %>
+                          <% } %>
+                            <span>
+                              <%= item.text %>
+                            </span>
+                            <% if (item.external || (item.url && item.url.startsWith('http'))) { %>
+                              <%- renderIcon('external-link', { class: 'menubar-ext-icon' }) %>
+                                <% } %>
+                    </a>
+                    <% } %>
+                  <% }) %>
+                <% } %>
+              <% if (optionsMenu && optionsMenu.position==='menubar' ) { %>
+                <div class="menubar-options">
+                  <%- include('options-menu', { optionsMenu }) %>
+                </div>
+              <% } %>
+      </div>
+  </div>
+</div>