Nuxt UI prop
I am trying to make item labels in NavigationMenu component (Nuxt UI Free) bigger. But it doesn't work for me, so I tried debugging with Button element:
<UButton :ui="{ label: 'text-3xl' }">Test Button</UButton>
Why this doesn't work?
8 Replies
Hi @PetyXbron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The reason why your code
<UButton :ui="{ label: 'text-3xl' }">Test Button</UButton> does not make the button label bigger is because, according to the Nuxt UI documentation, the Button component does not have a slot or slot class named label. The available slots for the Button component are things like base, leadingIcon, trailingIcon, etc., but not label.
To override the text size of the button label, you should target the base slot instead. For example:
This will apply the text-3xl class to the root element of the button, which affects the label size as well. The documentation shows that the ui prop is used to override slot styles, and the correct slot for the main button content is base, not label. The same applies to global theming in app.config.ts—you override the base slot for the button's main styles, including font size and weight Getting Started: Theme Config.
For NavigationMenu, you should check the available slot or class names for item labels and override those specifically, as the slot/class names may differ from Button. But for Button, use base, not label.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@411436203330502658> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai so what's wrong here?
<UNavigationMenu :collapsed=false arrow tooltip popover orientation="vertical" :items="navMenu" class="mt-5 px-5 data-[orientation=vertical]:w-400px" :ui="{ items: { label: 'text-2xl' } }" >
Let me check the knowledge base for you again. One moment! :books:
----------------------
The issue is with the structure of the
ui prop you are passing to <UNavigationMenu>. According to the Nuxt UI documentation, the ui prop for NavigationMenu does not have an items key. Instead, you should directly target the slot/class you want to override.
For making the item labels bigger, you should use the linkLabel class in the ui prop, like this:
The documentation lists linkLabel as the correct class to override for the label of navigation menu items, not items.label or items: { label: ... } NavigationMenu: Items.
So, the problem is the incorrect structure of the ui prop. Use linkLabel instead of items: { label: ... }.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@411436203330502658> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai how to make the label icon of NavigationMenu bigger?
Let me check the knowledge base for you again. One moment! :books:
----------------------
To make the label icon of a
NavigationMenu item bigger in Nuxt UI, you should use the linkLeadingIcon class in the ui prop. This class targets the icon that appears before the label in each navigation item.
Here’s how you can do it:
This will apply the text-2xl class (or any other Tailwind class you specify) to the leading icon of each item in the navigation menu. The available ui keys for slot-specific styling are documented, and linkLeadingIcon is the one that controls the icon size next to the label NavigationMenu: Items.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@411436203330502658> Kapa.ai is still learning and improving, please let me know how I did by reacting below.