nuxt ui navigationmenu custom slot label and icon disappears
Hi i tried to add a custom slot to my navigation menu items however now only the item within that custom slot is visible and the icon and label don't appear.
and this is the part of the items why could this be?
8 Replies
Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
When you use a custom slot for a specific item in Nuxt UI's
If you want to keep the default label and icon along with your custom badge, you need to include them in your slot template. For example: This way, you manually render the icon and label, then add your badge. Summary:
When you use a custom slot for a navigation menu item, you must render the icon and label yourself inside the slot, as the default rendering is replaced by your slot content. This is expected behavior in Nuxt UI's slot system for navigation menus NavigationMenu custom slot docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
UNavigationMenu (e.g., #helpBadgeTrailing), the slot content you provide will completely replace the default rendering for that item. This means that if you only put a <UBadge /> in your slot, only the badge will be rendered—your item's label and icon will not appear unless you explicitly include them in your slot template.
From the documentation:
Use the>slotproperty to customize a specific item.
You will have access to the following slots:
-#{{ item.slot }}
-#{{ item.slot }}-leading
-#{{ item.slot }}-label
-#{{ item.slot }}-trailing
...
You can also use the#item,#item-leading,#item-label, and#item-trailingslots to customize all items.
When you use a custom slot, you are responsible for rendering the content you want, including the label and icon if needed.How to fix:
See example in the docs
If you want to keep the default label and icon along with your custom badge, you need to include them in your slot template. For example: This way, you manually render the icon and label, then add your badge. Summary:
When you use a custom slot for a navigation menu item, you must render the icon and label yourself inside the slot, as the default rendering is replaced by your slot content. This is expected behavior in Nuxt UI's slot system for navigation menus NavigationMenu custom slot docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
oh really? in the docs their example suggests you can target only your custom slot item and the other items remain the same
@kapa.ai oh really? in the docs their example suggests you can target only your custom slot item and the other items remain the same
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items = [
{
label: 'Guide',
icon: 'i-lucide-book-open'
},
{
label: 'Composables',
icon: 'i-lucide-database'
},
{
label: 'Components',
icon: 'i-lucide-box',
slot: 'components' as const
}
] satisfies NavigationMenuItem[]
</script>
<template>
<UNavigationMenu :items="items" class="w-full justify-center">
<template #components-trailing>
<UBadge label="44" variant="subtle" size="sm" />
</template>
</UNavigationMenu>
</template>
Let me check the knowledge base for you again. One moment! :books:
----------------------
You're correct—according to the Nuxt UI documentation, when you use a slot like
-
#components-trailing, it only customizes the trailing part of the item with the slot: 'components', and the rest of the item's default rendering (icon, label, etc.) remains intact. The other items are not affected and continue to use the default rendering.
Here's the relevant example from the docs:
In this example, only the trailing part of the "Components" item is customized with a badge, while the icon and label are still rendered by default. This means you do not need to manually render the icon and label when using the -trailing slot; the slot only replaces the trailing section, not the entire item. If you use the main slot (e.g., #components), then you would need to render everything yourself, but for -trailing, -label, etc., only that part is replaced.
If your icon and label are disappearing, double-check that:
- You are using the -trailing slot (not the main slot).
- The slot property in your item matches the slot name in your template (e.g., slot: 'helpBadgeTrailing' and #helpBadgeTrailing-trailing for the trailing slot).
- You are not accidentally using the main slot (e.g., #helpBadgeTrailing), which would override the whole item.
If you use #helpBadgeTrailing (without -trailing), you must render the icon and label yourself. If you use #helpBadgeTrailing-trailing, only the trailing part is replaced, and the rest remains as per the default rendering.
Summary:-
#slotName-trailing → only trailing part is replaced, icon and label remain.
- #slotName → entire item is replaced, you must render icon and label yourself.
This behavior is confirmed in the documentation example you referenced NavigationMenu custom slot docs.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai thanks that fixed it i had to put -trailing at the end of the name
Let me check the knowledge base for you again. One moment! :books:
----------------------
You're welcome! Yes, in Nuxt UI's
See the official documentation for slot usage. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
UNavigationMenu, using the -trailing suffix (e.g., #helpBadgeTrailing-trailing) ensures that only the trailing part of the specific item is customized, while the default icon and label remain visible. This matches the documented behavior, where slots like #item-trailing or #slotName-trailing only override the trailing section of the item, not the entire item rendering. Glad it worked for you!See the official documentation for slot usage. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.