Menubar underlining a letter

[Matthew-Boyd]

How can a letter in a menubar item label be underlined to indicate a mnemonic (e.g., 'F' in "File" for Alt + F)? The ways I've tried tend to break the CSS styles and the Enter key functionality.

[Matthew-Boyd]

Add a passthrough for itemLabel:

<template>
  <Menubar 
    ref="menuRef" 
    :model="menuItems"
    :pt="{
      itemLabel: ({ context }) => ({
        innerHTML: renderMnemonic(context.item.label, context.item.mnemonic, showMnemonics)
      })
    }"
  />
</template>

<script setup>
const menuItems = ref([
  {
    label: 'File',
    mnemonic: "F",
    items: [
      { label: 'New', mnemonic: "N", command: () => newFile() },
      { label: 'Open', mnemonic: "O", command: () => openFile() }
    ]
  }
]);

const menuRef = ref(null);
const showMnemonics = ref(false);

const renderMnemonic = (label: any, mnemonic: any, show: any) => {
  if (!mnemonic || !show) return label;
  const index = label.toLowerCase().indexOf(mnemonic.toLowerCase());
  if (index === -1) return label;
  return label.slice(0, index) + '<u>' + label[index] + '</u>' + label.slice(index + 1);
};
</script>