@lion/ui 0.17.0-menu-system.0 → 0.18.0-menu-system.0

package/components/menu/README.md

@@ -147,7 +147,7 @@ export const tree = () => html`
 
 ## Disclosure menu
 
-See https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-navigation.html
+See [disclosure navigation](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-navigation.html)
 
 ```js preview-story
 export const disclosureMenu = () => html`

package/components/menu/src/InteractiveListMixin.js

@@ -3,6 +3,7 @@
 import { html, css, LitElement } from 'lit';
 import { SlotMixin, DisabledMixin } from '@lion/ui/core.js';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { MoreButtonMenuMixin } from './MoreButtonMenuMixin.js';
 import { uuid } from './utils/uuid.js';
 import { isInView } from './utils/isInView.js';
 import {
@@ -125,7 +126,7 @@ customElements.define('lion-menuitem', LionMenuitem);
  */
 const InteractiveListMixinImplementation = superclass =>
   // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
-  class InteractiveListMixin extends DisabledMixin(SlotMixin(superclass)) {
+  class InteractiveListMixin extends DisabledMixin(SlotMixin(MoreButtonMenuMixin(superclass))) {
     /** @type {any} */
     static styles = [
       css`
@@ -156,13 +157,13 @@ const InteractiveListMixinImplementation = superclass =>
 
     static get properties() {
       return {
-        // TODO: align with name of open-ui
+        // TODO: align with name of open-ui => "inline|block" in focusgroup
         orientation: { type: String, reflect: true },
-        // TODO: align with name of platform? (multiple)
+        // TODO: align with name of platform => ("multiple" in select, selection not part of focusgroup)
         multipleChoice: { type: Boolean, attribute: 'multiple-choice' },
         // TODO: align with name of open-ui
         selectionFollowsFocus: { type: Boolean, attribute: 'selection-follows-focus' },
-        // TODO: align with name of open-ui
+        // TODO: align with name of open-ui => "wrap" in focsugroup
         rotateKeyboardNavigation: { type: Boolean, attribute: 'rotate-keyboard-navigation' },
         // TODO: align with name of open-ui
         noPreselect: { type: Boolean, attribute: 'no-preselect' },
@@ -463,6 +464,7 @@ const InteractiveListMixinImplementation = superclass =>
           // console.debug('checking children of', node, node.children);
           // @ts-ignore - HTMLCollection is iterable
           for (const child of node.children) {
+            // @ts-ignore
             handleInteractiveListAdditionLevel(child, { newItems, level: level + 1 });
           }
           return;
@@ -486,10 +488,16 @@ const InteractiveListMixinImplementation = superclass =>
 
       // Move items to _listNode and add interactive node references (with [role]) to listItems
       nodes.forEach(node => {
-        // @ts-ignore - node type compatibility
+        // @ts-expect-error - node type compatibility
         handleInteractiveListAdditionLevel(node, { newItems });
       });
 
+      // @ts-expect-error
+      if (this.itemWrap && nodes.length) {
+        // @ts-expect-error
+        this._initMoreButtonMenu();
+      }
+
       newItems.forEach(item => {
         if (!this.__listItems.includes(item)) {
           this.__listItems.push(item);
@@ -793,4 +801,5 @@ const InteractiveListMixinImplementation = superclass =>
       return this.__getNextOption(currentIndex, offset);
     }
   };
+// @ts-ignore
 export const InteractiveListMixin = dedupeMixin(InteractiveListMixinImplementation);

package/components/menu/src/MoreButtonMenuMixin.js

@@ -0,0 +1,296 @@
+// @ts-nocheck
+/**
+ * @param {any} superclass
+ */
+/** @type {any} */
+
+const styles = `
+  <style>
+    /** More button is hidden by default */
+    [data-more-button-wrapper] {
+      display: none;
+    }
+
+    [data-more-button-menu]:has([role='listitem'] [active]:focus):not(
+        :has([role='listitem'] [active][aria-expanded='true'])
+      ) {
+      overflow: visible;
+      width: auto;
+      height: auto;
+      position: absolute;
+      top: 100%;
+      background-color: var(--oj2_bg_default);
+    }
+    [data-more-button-menu],
+    [data-more-button-menu]:has([role='listitem'] [active][aria-expanded='true']) {
+      overflow: hidden;
+      width: 1px;
+      height: 1px;
+    }
+
+    :host([responsive-mode='desktop']) [level='1'] > [slot='list'] > [role='listitem'] > button,
+    :host([responsive-mode='desktop']) [level='1'] > [slot='list'] > [role='listitem'] > a,
+    :host([responsive-mode='desktop'])
+      [level='1']
+      > [slot='list']
+      > [data-more-button-wrapper]
+      > [role='listitem']
+      > button,
+    :host([responsive-mode='desktop'])
+      [level='1']
+      > [slot='list']
+      > [data-more-button-wrapper]
+      > [role='listitem']
+      > a {
+      white-space: nowrap;
+    }
+    /**
+    * TODO listitem rigth margin/gap is not taken at the account ATM
+    */
+    /**
+     * More button relies on the fact that the menu items do not break the line
+     * TODO is it optimal?
+     */
+    :host([responsive-mode='desktop']) > [role='list'] > [role='listitem'] > button,
+    :host([responsive-mode='desktop']) > [role='list'] > [role='listitem'] > a {
+      white-space: nowrap;
+    }    
+  </style>
+  `;
+
+// @ts-ignore - JS mixin typing
+export const MoreButtonMenuMixin = superclass =>
+  class MoreButtonMenuMixinClass extends superclass {
+    constructor() {
+      super();
+      this.__resizeTimeout = null;
+      this.isMoreButtonShown = null;
+      this.handleResize = this.handleResize.bind(this);
+    }
+
+    disconnectedCallback() {
+      window.removeEventListener('resize', this.handleResize);
+      if (this.__resizeTimeout) {
+        clearTimeout(this.__resizeTimeout);
+      }
+      super.disconnectedCallback?.();
+    }
+
+    _initMoreButtonMenu() {
+      this._createMoreButtonWrapper();
+      window.addEventListener('resize', this.handleResize);
+      this.handleResize();
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    _getDeepActiveElement() {
+      let host = document.activeElement || document.body;
+      while (host && host.shadowRoot && host.shadowRoot.activeElement) {
+        host = host.shadowRoot.activeElement;
+      }
+      return host;
+    }
+
+    _createMoreButtonWrapper() {
+      const moreButtonWrapper = document.createElement('div');
+      const style = document.createElement('style');
+      style.textContent = styles;
+      moreButtonWrapper.appendChild(style);
+      moreButtonWrapper.setAttribute('data-more-button-wrapper', '');
+      [...this.getMoreButtonSlotProjection().childNodes].forEach(node =>
+        moreButtonWrapper.appendChild(node),
+      );
+      const moreButton = moreButtonWrapper.querySelector('button');
+      moreButton?.setAttribute('data-more-button', '');
+      moreButton?.setAttribute('tabindex', '-1');
+      moreButton?.setAttribute('aria-expanded', 'false');
+      const moreButtonMenu = document.createElement('div');
+      moreButtonMenu.setAttribute('data-more-button-menu', '');
+      moreButtonWrapper.appendChild(moreButtonMenu);
+      moreButtonMenu.setAttribute('role', 'none');
+      this._listNode.appendChild(moreButtonWrapper);
+
+      const isElementDirectFocusableItemUnderMoreButtonMenu = element => {
+        const targetTagName = element?.tagName;
+        return (
+          element?.parentElement?.parentElement === moreButtonMenu &&
+          (targetTagName === 'BUTTON' || targetTagName === 'A')
+        );
+      };
+
+      moreButtonMenu.addEventListener('focusin', event => {
+        const target = event?.target;
+        if (isElementDirectFocusableItemUnderMoreButtonMenu(target)) {
+          if (target?.getAttribute('aria-expanded') === 'true') {
+            target?.click();
+          }
+          moreButton?.setAttribute('aria-expanded', 'true');
+        }
+      });
+
+      moreButtonMenu.addEventListener('focusout', event => {
+        const target = event?.target;
+        if (isElementDirectFocusableItemUnderMoreButtonMenu(target)) {
+          moreButton?.setAttribute('aria-expanded', 'false');
+        }
+      });
+
+      this.hasMoreButtonMenuAnyFocusedFirstLevelItems = false;
+
+      moreButton?.addEventListener('mousedown', () => {
+        this.hasMoreButtonMenuAnyFocusedFirstLevelItems = false;
+        const focusableFirstLevelItems = moreButtonMenu.querySelectorAll(
+          ':scope > [role="listitem"] > a, :scope > [role="listitem"] > button',
+        );
+
+        [...focusableFirstLevelItems]?.forEach(focusableFirstLevelItem => {
+          if (this._getDeepActiveElement() === focusableFirstLevelItem) {
+            this.hasMoreButtonMenuAnyFocusedFirstLevelItems = true;
+          }
+        });
+      });
+
+      moreButton?.addEventListener('click', () => {
+        if (!this.hasMoreButtonMenuAnyFocusedFirstLevelItems) {
+          moreButtonMenu
+            .querySelector(':scope > [role="listitem"] > a, :scope > [role="listitem"] > button')
+            ?.focus();
+        }
+      });
+    }
+
+    getMoreButtonSlotProjection() {
+      return this.querySelector('[slot="more-button"]');
+    }
+
+    getMoreButtonMenu() {
+      return this.querySelector('[data-more-button-menu]');
+    }
+
+    getMoreButtonMenuWrapper() {
+      return this.querySelector('[data-more-button-wrapper]');
+    }
+
+    displayMoreButton() {
+      this.getMoreButtonMenuWrapper().style.display = 'block';
+      this.isMoreButtonShown = true;
+    }
+
+    hideMoreButton() {
+      this.getMoreButtonMenuWrapper().style.display = 'none';
+      this.isMoreButtonShown = false;
+    }
+
+    doItemsFit() {
+      return this._listNode.scrollWidth - this._listNode.clientWidth === 0;
+    }
+
+    getListItems() {
+      const listNode = this._listNode;
+      return Array.from(listNode.querySelectorAll(':scope > [role="listitem"]'));
+    }
+
+    /**
+     * @param {Node} listItem
+     */
+    getListItemWithAdjacentNodes = listItem => {
+      const markerNodeType = this.nodeType && Node.COMMENT_NODE;
+      /** @param {Node | null | undefined} node */
+      const isMarkerComment = node => node?.nodeType === markerNodeType && node?.nodeValue === '';
+
+      const previousNodes = [];
+      let { previousSibling } = listItem;
+      while (previousSibling) {
+        previousNodes.unshift(previousSibling);
+        if (isMarkerComment(previousSibling)) {
+          break;
+        }
+        ({ previousSibling } = previousSibling);
+      }
+
+      const nextNodes = [];
+      let { nextSibling } = listItem;
+      let includeOneMoreAfterComment = false;
+      while (nextSibling) {
+        nextNodes.push(nextSibling);
+
+        if (includeOneMoreAfterComment) {
+          break;
+        }
+
+        if (isMarkerComment(nextSibling)) {
+          includeOneMoreAfterComment = true;
+        }
+
+        ({ nextSibling } = nextSibling);
+      }
+
+      const fragment = document.createDocumentFragment();
+      const nodes = [...previousNodes, listItem, ...nextNodes];
+      nodes.forEach(node => fragment.appendChild(node));
+      return fragment;
+    };
+
+    moveItemToMoreButtonMenuFromMainMenu() {
+      const moreButtonMenuElement = this.getMoreButtonMenu();
+      const listItems = this._listNode.querySelectorAll(':scope > [role="listitem"]');
+      const listItem = listItems[listItems.length - 1];
+
+      const fragment = this.getListItemWithAdjacentNodes(listItem);
+      moreButtonMenuElement.prepend(fragment);
+      listItem.style.display = '';
+      this.displayMoreButton();
+    }
+
+    moveAllItemsToMainMenuFromMoreButtonMenu() {
+      const moreButtonMenu = this.getMoreButtonMenu();
+      const moreButtonMenuWrapper = this.getMoreButtonMenuWrapper();
+      if (moreButtonMenu.childNodes.length === 0) {
+        return;
+      }
+      [...moreButtonMenu.childNodes].forEach(node => {
+        moreButtonMenuWrapper.before(node);
+      });
+    }
+
+    renderAllItemsInMainMenu() {
+      this.moveAllItemsToMainMenuFromMoreButtonMenu();
+    }
+
+    hideItemsOneByOneInMainMenuUntilTheyFit() {
+      let hiddenItemsCount = 0;
+      const mainMenuItems = this.getListItems();
+      for (let i = mainMenuItems.length - 1; i >= 0 && !this.doItemsFit(); i -= 1) {
+        mainMenuItems[i].style.display = 'none';
+        hiddenItemsCount += 1;
+      }
+      return hiddenItemsCount;
+    }
+
+    moveHiddenItemsFromMainMenuToMoreButtonMenu(hiddenItemsCount) {
+      for (let i = 0; i < hiddenItemsCount; i += 1) {
+        this.moveItemToMoreButtonMenuFromMainMenu();
+      }
+    }
+
+    handleResize() {
+      if (this.__resizeTimeout) {
+        return;
+      }
+
+      this.__resizeTimeout = setTimeout(() => {
+        this.__resizeTimeout = null;
+
+        this.renderAllItemsInMainMenu();
+        this.hideMoreButton();
+
+        if (this.doItemsFit()) {
+          return;
+        }
+
+        this.displayMoreButton();
+        const hiddenItemsCount = this.hideItemsOneByOneInMainMenuUntilTheyFit();
+        this.moveHiddenItemsFromMainMenuToMoreButtonMenu(hiddenItemsCount);
+      }, 50);
+    }
+  };

package/components/menu/src/MultiLevelListMixin.js

@@ -207,7 +207,6 @@ const MultiLevelListMixinImplementation = superclass =>
       switch (key) {
         case 'Enter':
         case ' ':
-          // console.debug('activeIndex', this.activeIndex);
           // make it work like a button
           this.activeItem?.click();
           break;

package/components/navigation-bar/src/LionNavigationBar.js

@@ -1,4 +1,6 @@
-import { LitElement, html, css } from 'lit';
+// @ts-nocheck
+/* eslint-disable class-methods-use-this */
+import { LitElement, html, css, nothing } from 'lit';
 import { LionMenuHybrid } from '@lion/ui/menu.js';
 import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
 
@@ -102,6 +104,17 @@ export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
           padding-bottom: 200%;
         }
 
+        /**
+        * TODO remove it. Use it now for testing More button feature
+        */
+        :host([responsive-mode='desktop']) [level='1'] > [slot='list'] > [role='listitem'],
+        :host([responsive-mode='desktop'])
+          [level='1']
+          > [slot='list']
+          > [data-more-button-wrapper] {
+          margin-right: 180px;
+        }
+
         :host([responsive-mode='mobile']) nav {
           display: flex;
           flex-direction: column;
@@ -157,101 +170,25 @@ export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
 
     this.prefilledSuggestion = '';
 
-    // Assign styles as a property, so that subclasses can augment it
-    // this.styles = styles;
-    // this.menuOpened = false;
-
     const mql = window.matchMedia(`(width <= ${this.breakpointMin}px)`);
     /** @type {NavBarResponsiveMode} */
     this.responsiveMode = mql.matches ? 'mobile' : 'desktop';
-    this._levelCfg = LionNavigationBar.#getLevelCfg(this.responsiveMode);
-    this._levelSecondaryCfg = this.#getSecondaryLevelCfg();
+    this._levelCfg = this._getLevelCfg(this.responsiveMode);
+    this._levelSecondaryCfg = this._getSecondaryLevelCfg(this.responsiveMode);
 
     mql.addEventListener('change', () => {
       this.responsiveMode = mql.matches ? 'mobile' : 'desktop';
-      this._levelCfg = LionNavigationBar.#getLevelCfg(this.responsiveMode);
-      this._levelSecondaryCfg = this.#getSecondaryLevelCfg();
+      this._levelCfg = this._getLevelCfg(this.responsiveMode);
+      this._levelSecondaryCfg = this._getSecondaryLevelCfg(this.responsiveMode);
     });
 
     this.#storeLatestFocusedElementId();
-    this.#delegateAnalyticsEvents();
-  }
-
-  #getSecondaryLevelCfg() {
-    if (this.responsiveMode === 'mobile') {
-      return {
-        l1: {
-          isBar: true,
-        },
-        l2: {
-          isBar: false,
-        },
-      };
-    }
-
-    return {
-      l1: {
-        isBar: true,
-      },
-      l2: {
-        isBar: false,
-      },
-    };
-  }
-
-  /** @type {string | null} */
-  #latestFocusedElementId = null;
-
-  #storeLatestFocusedElementId() {
-    this.addEventListener('focusin', ({ target }) => {
-      // @ts-ignore
-      this.#latestFocusedElementId = target.id;
-    });
-  }
-
-  #syncLatestFocusedElementForNewResponsiveMode() {
-    // We might show/hide or rerender some elements (with same ids) in different positions in the DOM.
-    // As these are physically different elements, we must move focus (as otherwise it would be reset to body)
-    if (!this.#latestFocusedElementId) return;
-    const newFocusedElement = this.shadowRoot?.querySelector(`#${this.#latestFocusedElementId}`);
-    if (newFocusedElement instanceof HTMLElement) {
-      newFocusedElement.focus();
-    }
-  }
-
-  #delegateAnalyticsEvents() {
-    this.addEventListener('click', ({ target }) => {
-      if (!target || !(target instanceof HTMLElement)) return;
-
-      // @ts-expect-error
-      const isButton = target.tagName === 'BUTTON' || target.constructor._$isLionButton$;
-      const isAnchor = target.tagName === 'A';
-      if (!isButton && !isAnchor) return;
-
-      if (!target.id) return;
-
-      // TODO: do in extension layer
-      this.dispatchEvent(
-        new CustomEvent('nav-item-click', {
-          // N.B. we can also retrive the item
-          detail: {
-            item: {
-              id: target.id,
-              label: target.textContent?.trim() || '',
-              href: isAnchor ? target.getAttribute('href') : undefined,
-            },
-          },
-          // bubbles: true,
-          // composed: true,
-        }),
-      );
-    });
   }
 
   /**
    * @param {NavBarResponsiveMode} responsiveMode
    */
-  static #getLevelCfg(responsiveMode) {
+  _getLevelCfg(responsiveMode) {
     // N.B. we're fighting some of the overlay configs provided by LionMenuOverlay here,
     // the idea is to take over all of that when depending on LionMenu, after removing LonMenuOverlay and LionMenuHybrid components altogether.
 
@@ -322,12 +259,66 @@ export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
     };
   }
 
+  _getSecondaryLevelCfg(responsiveMode) {
+    if (responsiveMode === 'mobile') {
+      return {
+        l1: {
+          isBar: true,
+        },
+        l2: {
+          isBar: false,
+        },
+      };
+    }
+
+    return {
+      l1: {
+        isBar: true,
+      },
+      l2: {
+        isBar: false,
+      },
+    };
+  }
+
+  /** @type {string | null} */
+  #latestFocusedElementId = null;
+
+  #storeLatestFocusedElementId() {
+    this.addEventListener('focusin', ({ target }) => {
+      // @ts-ignore
+      this.#latestFocusedElementId = target.id;
+    });
+  }
+
+  #syncLatestFocusedElementForNewResponsiveMode() {
+    // We might show/hide or rerender some elements (with same ids) in different positions in the DOM.
+    // As these are physically different elements, we must move focus (as otherwise it would be reset to body)
+    if (!this.#latestFocusedElementId) return;
+    const newFocusedElement = this.shadowRoot?.querySelector(`#${this.#latestFocusedElementId}`);
+    if (newFocusedElement instanceof HTMLElement) {
+      newFocusedElement.focus();
+    }
+  }
+
+  /**
+   * @param {import("./types.js").MenuItem}
+   * @param {number} level
+   */
+  _getId(menuItem, level) {
+    if (menuItem.id) return menuItem.id;
+    const title = menuItem.title || menuItem.label || 'item';
+    return `${
+      Number.isInteger(level) ? `l${level}-${title}` : title
+    }-${Math.random().toString(16).slice(2)}`;
+  }
+
   /**
    * @param {import('lit').PropertyValues} changedProperties
    */
   updated(changedProperties) {
     if (changedProperties.has('responsiveMode')) {
-      this._levelCfg = LionNavigationBar.#getLevelCfg(this.responsiveMode);
+      this._levelCfg = this._getLevelCfg(this.responsiveMode);
       this.#syncLatestFocusedElementForNewResponsiveMode();
     }
   }
@@ -344,18 +335,18 @@ export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
               ? html`<button data-close data-level="1">✖️</button>`
               : ''}
           </div>
-          ${LionNavigationBar._searchTemplate(this.suggestions, this.prefilledSuggestion)}
+          ${this._searchTemplate()}
         </div>
         <div class="nav-body">
-          ${this._menulevelTemplate(this.menuSupportItems, 1, this._levelSecondaryCfg.l1, '')}
+          ${this._menulevelTemplate(this.menuSupportItems, 1, '')}
           ${this.responsiveMode === 'desktop'
-            ? LionNavigationBar._ctaTemplate(this.ctaPrimary, this.ctaSecondary)
+            ? this._ctasTemplate(this.ctaPrimary, this.ctaSecondary)
             : ''}
-          ${this._menulevelTemplate(this.menuItems, 1, this._levelCfg.l1, '')}
+          ${this._menulevelTemplate(this.menuItems, 1, '', true)}
         </div>
         ${this.responsiveMode === 'mobile'
           ? html`<div class="nav-footer">
-              ${LionNavigationBar._ctaTemplate(this.ctaPrimary, this.ctaSecondary)}
+              ${this._ctasTemplate(this.ctaPrimary, this.ctaSecondary)}
             </div>`
           : ''}
       </nav>
@@ -366,7 +357,7 @@ export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
    * @param {string[]} suggestions
    * @returns {import('lit').TemplateResult}
    */
-  static _searchTemplate(suggestions, prefilledSuggestion = '') {
+  _searchTemplate(suggestions = this.suggestions, prefilledSuggestion = this.prefilledSuggestion) {
     return html` <form role="search">
       <input
         type="search"
@@ -386,16 +377,18 @@ export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
    * @param {CtaLink} ctaSecondary
    * @returns {import('lit').TemplateResult}
    */
-  static _ctaTemplate(ctaPrimary, ctaSecondary) {
+  _ctasTemplate(ctaPrimary, ctaSecondary) {
     return html`<div class="cta-items">
       ${ctaSecondary?.href
         ? html`<div class="cta-secondary">
-            <a id="${ctaSecondary.id}" href="${ctaSecondary.href}">${ctaSecondary.label} </a>
+            <a id="${this._getId(ctaSecondary)}" href="${ctaSecondary.href}"
+              >${ctaSecondary.label}
+            </a>
           </div>`
         : ''}
       ${ctaPrimary?.href
         ? html`<div class="cta-primary">
-            <a id="${ctaPrimary.id}" href="${ctaPrimary.href}">${ctaPrimary.label} </a>
+            <a id="${this._getId(ctaPrimary)}" href="${ctaPrimary.href}"> ${ctaPrimary.label}</a>
           </div>`
         : ''}
     </div>`;
@@ -404,17 +397,14 @@ export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
   /**
    * @param {MenuItem[]} menuItemsForLevel
    * @param {number} level
-   * @param {LevelConfig} cfgForLevel
    * @returns {import('lit').TemplateResult}
    */
-  _menulevelTemplate(menuItemsForLevel, level, cfgForLevel, prevText = '') {
+  _menulevelTemplate(menuItemsForLevel, level, prevText = '', itemWrap = false) {
     // @ts-ignore
-    const cfgForNextLevel = this._levelCfg[`l${level + 1}`];
-
-    const getId = (/** @type {import("./types.js").MenuItem} */ menuItem) =>
-      menuItem.id || `l${level}-${menuItem.title}`;
+    const cfgForLevel = this._levelCfg[`l${level}`];
 
     return html`<lion-menu-hybrid
+      ?item-wrap=${itemWrap}
       .config="${cfgForLevel.openableConfig || {}}"
       .bar="${cfgForLevel.isBar}"
       ?data-has-full-width-flyout="${cfgForLevel.hasFullWidthFlyout}"
@@ -429,21 +419,21 @@ export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
         menuItem => html`
           <div role="listitem">
             ${menuItem.sub
-              ? html` <button id="${getId(menuItem)}" data-invoker>${menuItem.title}</button>
+              ? html` <button id="${this._getId(menuItem)}" data-invoker>${menuItem.title}</button>
                   ${menuItem.sub
-                    ? this._menulevelTemplate(
-                        menuItem.sub,
-                        level + 1,
-                        cfgForNextLevel,
-                        menuItem.title,
-                      )
+                    ? this._menulevelTemplate(menuItem.sub, level + 1, menuItem.title)
                     : ''}`
-              : html` <a id="${getId(menuItem)}" href="${menuItem.link || ''}"
+              : html` <a id="${this._getId(menuItem)}" href="${menuItem.link || ''}"
                   >${menuItem.title}</a
                 >`}
           </div>
         `,
       )}
-    </lion-menu-hybrid>`;
+      ${itemWrap
+        ? html`<div slot="more-button">
+            <button>More</button>
+          </div>`
+        : nothing}
+    </lion-menu-hybrid> `;
   }
 }