Menubar start becomes really wide when using image with percentage width

Question

I use Menubar (https://primevue.org/menubar/), and I when add an image to start slot, I have to explicitly tell the width parameter in pixels, because if I use percentage, the start slot takes up all available space. My workaround would be to calculate the pixels based on a percentage and the screen-width in a computed variable, and give that to the image as width, but that seems really barbaric. Any other idea how to fix it?

https://stackblitz.com/edit/bqaxxp?file=src%2FApp.vue

Answer 1

You can pass style for start wrapper node using PassThroughOptions

<Menubar :model="items" :pt="{ start: { style: { width: '20%' } } }">
  <template #start>
    <img src="/img.png" width="100%" />
  </template>

  <template #item>
    ...
  </template>
</Menubar>