Nuxt•3mo ago

How do I change the size of the UNavigationMenu buttons?

  <UNavigationMenu
  :items="items"
  orientation="vertical"
  class="w-full mb-auto"
  :ui="{
    item: 'text-xs'
  }"
/>

  <UNavigationMenu
  :items="items"
  orientation="vertical"
  class="w-full mb-auto"
  :ui="{
    item: 'text-xs'
  }"
/>

This isn't working

2 Replies

kapa.ai•3mo ago

Hi @Uchuu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The knowledge sources do not explicitly document a dedicated size prop for UNavigationMenu, nor do they provide a list of accepted keys for the ui prop that would directly control the size of the navigation menu buttons. The documentation does show usage of the ui prop for customizing classes, but the specific key for changing the button or item size is not detailed. Your approach of using :ui="{ item: 'text-xs' }" is logical, but the sources do not confirm that item is a valid key for this purpose. The available ui customization keys are more granular (e.g., link, childLink, linkLabel, etc.) and are not clearly mapped to a "button size" concept in the documentation provided. If you want to customize the appearance, you may need to target more specific keys such as link or linkLabel, for example:

<UNavigationMenu
  :items="items"
  orientation="vertical"
  :ui="{
    link: 'text-xs'
  }"
/>

<UNavigationMenu
  :items="items"
  orientation="vertical"
  :ui="{
    link: 'text-xs'
  }"
/>

However, since the documentation does not confirm this approach, it may require experimentation. If this does not work, you may need to inspect the rendered HTML and apply custom CSS classes as a workaround. For more details on the available ui keys, refer to the NavigationMenu API section, which lists possible keys but does not specify a direct size prop or guarantee that item will work for sizing the buttons. If you need more precise control, you may need to consult the component source or Nuxt UI community for further guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@1035470271441805353> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

How do I change the size of the UNavigationMenu buttons?

Did you find this page helpful?