diff --git a/nx2/blocks/shared/menu/menu.css b/nx2/blocks/shared/menu/menu.css
index 39b8f6936..63ff7190d 100644
--- a/nx2/blocks/shared/menu/menu.css
+++ b/nx2/blocks/shared/menu/menu.css
@@ -20,7 +20,7 @@
.menu-item {
display: flex;
- align-items: center;
+ align-items: flex-start;
gap: var(--s2-spacing-100);
width: 100%;
padding: var(--s2-spacing-75) var(--s2-spacing-100);
@@ -41,6 +41,15 @@
background: var(--s2-gray-200);
}
+.menu-item:disabled {
+ color: light-dark(var(--s2-gray-500), var(--s2-gray-600));
+ cursor: default;
+}
+
+.menu-item:disabled:hover {
+ background: none;
+}
+
.menu-item-icon {
display: flex;
align-items: center;
@@ -63,6 +72,11 @@
}
}
+.menu-item:disabled .menu-item-icon path,
+.menu-item:disabled .menu-item-icon text {
+ fill: light-dark(var(--s2-gray-500), var(--s2-gray-600));
+}
+
.menu-item-text {
display: flex;
flex-direction: column;
diff --git a/nx2/blocks/shared/menu/menu.js b/nx2/blocks/shared/menu/menu.js
index 5f47f44dc..e51d029c0 100644
--- a/nx2/blocks/shared/menu/menu.js
+++ b/nx2/blocks/shared/menu/menu.js
@@ -45,7 +45,7 @@ class NxMenu extends LitElement {
if (e.newState !== 'open') return;
this._trigger?.toggleAttribute('data-active', true);
this._trigger?.setAttribute('aria-expanded', 'true');
- const first = this.items?.find((i) => !i.divider && !i.section);
+ const first = this.items?.find((i) => !i.divider && !i.section && !i.disabled);
this._active = first?.id;
this.updateComplete.then(() => {
if (!this.ignoreFocus) this.shadowRoot.querySelector(`[data-id="${this._active}"]`)?.focus();
@@ -85,6 +85,7 @@ class NxMenu extends LitElement {
}
_select(item) {
+ if (!item || item.disabled) return;
this.close();
this.dispatchEvent(new CustomEvent('select', { detail: { id: item.id }, bubbles: true, composed: true }));
}
@@ -119,9 +120,11 @@ class NxMenu extends LitElement {
data-id=${item.id}
class="menu-item ${item.id === this._active ? 'menu-item-active' : ''}"
type="button"
+ ?disabled=${item.disabled}
+ aria-disabled=${item.disabled ? 'true' : nothing}
@click=${() => this._select(item)}
- @mouseenter=${() => { this._active = item.id; }}
- @focus=${() => { this._active = item.id; }}
+ @mouseenter=${() => { if (!item.disabled) this._active = item.id; }}
+ @focus=${() => { if (!item.disabled) this._active = item.id; }}
>
${item.icon ? html`` : nothing}