#Nuxt UI NavigationMenu items gap

6 messages · Page 1 of 1 (latest)

gentle raptorBOT
#

Hi @native glacier. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To increase the gap between items in a horizontal Nuxt UI NavigationMenu, you should use the ui prop and target the correct slot/class. According to the documentation, the childList class is used for the container of child items (i.e., dropdown content), not the top-level navigation items.

For the top-level horizontal items, you should use the content slot in the ui prop. For example:

<UNavigationMenu
  :items="items"
  orientation="horizontal"
  :ui="{ content: 'gap-8' }"
/>

This will apply the gap-8 class to the flex container holding the top-level navigation items, increasing the space between them.

If you want to customize the gap for child items (dropdowns), then childList is the correct slot to target.

Reference: NavigationMenu API

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

native glacier
#

@gentle raptor still doesn't work in this case:```html
<!-- (Bottom) Header -->
<div :class="[
'z-[1000] w-screen max-w-screen fixed left-0 bottom-0 flex flex-row items-center justify-between bg-elevated/25 border-t border-default max-h-[15%] py-3 px-4'
]">
<!-- Logo section -->
<div class="flex-1">
<div class="flex justify-start">
<NuxtLink to="/">
<img src="/media/logo.webp" width="40px" height="40px" />
</NuxtLink>
</div>
</div>

        <!-- Navigation section -->
        <div class="flex-1 flex justify-center">
            <UNavigationMenu :collapsed="false" orientation="horizontal" :items="linksMenu" class="text-sm" :ui="{
                linkLabel: 'text-sm',
                linkLeadingIcon: 'size-5',
                content: 'gap-25'
            }" />
        </div>

        <!-- Account section -->
        <div class="flex-1 flex justify-end">
            <div>
                <AccountMenu :collapsed="false" />
            </div>
        </div>
    </div>```
gentle raptorBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

I'm sorry you're having trouble increasing the gap between horizontal NavigationMenu items. Based on the official Nuxt UI documentation, the content slot in the ui prop is the correct target for the top-level navigation items, and applying a class like gap-8 should work:

<UNavigationMenu
  :items="items"
  orientation="horizontal"
  :ui="{ content: 'gap-8' }"
/>

However, if this does not work in your layout, it's possible that the default structure of UNavigationMenu does not apply the gap utility as expected, or your parent container's flex settings may interfere.

The knowledge sources do not provide further details about customizing the gap between top-level items beyond the content slot in the ui prop. There is no explicit mention of another slot or class for this purpose in the documentation. If gap-8 on content does not work, you may need to inspect the rendered HTML to see if the class is being applied and if the container is using flex layout. You might also need to add a custom class or override styles as a workaround.

In summary, according to the documentation, using the content slot in the ui prop is the intended way, but if it doesn't work, the knowledge sources do not provide an alternative solution or troubleshooting steps for this specific issue NavigationMenu API.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: