NuxtN
Nuxt•8mo ago•
4 replies
SamKaizen

How to customise the leading icon / avatar for UNavigationMenu Component

So I needed to customise how the UDashboardSidebar looks and this is what I'm using 

<UDashboardSidebar collapsible resizable :ui="{ body: 'flex flex-row p-0 gap-0' }" :min-size="4" :default-size="30"
    :max-size="40" :collapsed-size="4">
    <!-- NOTE : tailwind size --spacing var by default is 0.25rem while for the UDashboardGroup we have set unit as rem so for min-w-16 we need to set it to 0.25rem * 16 = 4rem -->

    <!-- we do not need the full width header -->
    <!-- <template #header="{ collapsed }">
      <h1>Aeon Rift</h1>
    </template> -->

    <!-- default body slot  -->
    <!-- the narrow always visible in non mobile at least -->
    <div class="bg-primary text-inverted h-full min-w-16">
      <UNavigationMenu tooltip collapsed orientation="vertical" variant="link" :items="keyMenuItems" color="neutral"
        type="single" :ui="{ root: '' }">
        <template #components-leading>
          <!-- TODO icon goes here -->
        </template>
      </UNavigationMenu>
    </div>
    <div class="flex-1">
          <!-- TODO children of selected entry from the first nav menu goes here -->
</div>
  </UDashboardSidebar>


This is to be an implementation of sidebar where the top level menu entries are persistently shown as icons in a coloured bar while the children menu entries are shown in the 2nd div (regular light mode or dark mode sidebar style)

in this style of menus usually the top level menu entry icons are fairly large (compared to regular size) I saw the code puts it as size-5 but there isn't really a prop or anything to adjust the sizes and figured i needed to override the #component-leading

Am i on the right track? how would i refer to the item (the navigationMenu gets passed an array via items prop) so something like item.icon can be referred to? would you recommend a different way?
Was this page helpful?