N
Nuxt•4mo ago
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>
<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?
2 Replies
kapa.ai
kapa.ai•4mo ago
Hi @SamKaizen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're on the right track! The UNavigationMenu component supports custom slots for leading content, such as icons or avatars, for each item. To customize the leading icon/avatar and control its size, you should use the #item-leading or #{{ item.slot }}-leading slot. This gives you access to the current item, so you can render its icon or avatar as you wish. Here's how you can do it: 1. Use the #item-leading slot: This slot exposes the item object, allowing you to access properties like item.icon or item.avatar. 2. Customize the icon size: You can apply any Tailwind class (e.g., size-7, size-8, etc.) to control the icon size. Example 
<UNavigationMenu
  tooltip
  collapsed
  orientation="vertical"
  variant="link"
  :items="keyMenuItems"
  color="neutral"
  :ui="{ root: '' }"
>
  <template #item-leading="{ item }">
    <UIcon :name="item.icon" class="size-8" />
    <!-- Or, for avatars: -->
    <!-- <UAvatar v-if="item.avatar" v-bind="item.avatar" class="size-8" /> -->
  </template>
</UNavigationMenu>
<UNavigationMenu
  tooltip
  collapsed
  orientation="vertical"
  variant="link"
  :items="keyMenuItems"
  color="neutral"
  :ui="{ root: '' }"
>
  <template #item-leading="{ item }">
    <UIcon :name="item.icon" class="size-8" />
    <!-- Or, for avatars: -->
    <!-- <UAvatar v-if="item.avatar" v-bind="item.avatar" class="size-8" /> -->
  </template>
</UNavigationMenu>
- item is available in the slot scope, so you can reference item.icon or item.avatar directly. - You can use any size class you want (size-8, size-10, etc.) to make the icons larger than the default. This approach is recommended for your use case, as it gives you full control over the leading content for each menu item and allows you to adjust the size as needed for your sidebar design. References:
- The documentation confirms the use of #item-leading and other item slots for customization, and shows how to access the item object within the slot scope. You can see an example of slot usage and item access here: With tooltip in items and With custom slot. - The default icon size is set via classes like size-5, but you can override this in your slot template as shown above NavigationMenu Theme. Let me know if you need a more specific example or further customization! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?