N
Nuxt•3d ago
Omnislash

UNavigationMenu custom variants UI3

Hello Kapa 🙂 Show me how to create custom variants for UNavigationMenu in Nuxt UI3 I mostly want to change links colors (hover, activated or not) and size
2 Replies
kapa.ai
kapa.ai•3d ago
Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hello! I'd be happy to show you how to create custom variants for UNavigationMenu in Nuxt UI 3. The UNavigationMenu component allows for customization of various aspects including link colors and sizes through its theming system. Customizing UNavigationMenu Variants You can customize the UNavigationMenu by defining your own variants in your app configuration. Here's how to modify link colors (for hover, active states) and sizes: Basic Configuration You can define custom variants in your app.config.ts file: 
export default defineAppConfig({
  ui: {
    navigationMenu: {
      variants: {
        // Your custom variants here
      },
      // You can also define compound variants for more specific styling
      compoundVariants: [
        // Your compound variants here
      ]
    }
  }
})
export default defineAppConfig({
  ui: {
    navigationMenu: {
      variants: {
        // Your custom variants here
      },
      // You can also define compound variants for more specific styling
      compoundVariants: [
        // Your compound variants here
      ]
    }
  }
})
Customizing Link Colors To customize link colors for different states (hover, active), you can use compound variants: 
export default defineAppConfig({
  ui: {
    navigationMenu: {
      compoundVariants: [
        // For primary color when active
        {
          color: 'primary',
          variant: 'pill',
          active: true,
          class: {
            link: 'text-(--ui-primary)',
            linkLeadingIcon: 'text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)'
          }
        },
        // For neutral color when active
        {
          color: 'neutral',
          variant: 'pill',
          active: true,
          class: {
            link: 'text-(--ui-text-highlighted)',
            linkLeadingIcon: 'text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)'
          }
        },
        // For hover states when not active
        {
          disabled: false,
          active: false,
          variant: 'pill',
          class: {
            link: [
              'hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50',
              'transition-colors before:transition-colors'
            ],
            linkLeadingIcon: [
              'group-hover:text-(--ui-text)',
              'transition-colors'
            ]
          }
        }
      ]
    }
  }
})
export default defineAppConfig({
  ui: {
    navigationMenu: {
      compoundVariants: [
        // For primary color when active
        {
          color: 'primary',
          variant: 'pill',
          active: true,
          class: {
            link: 'text-(--ui-primary)',
            linkLeadingIcon: 'text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)'
          }
        },
        // For neutral color when active
        {
          color: 'neutral',
          variant: 'pill',
          active: true,
          class: {
            link: 'text-(--ui-text-highlighted)',
            linkLeadingIcon: 'text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)'
          }
        },
        // For hover states when not active
        {
          disabled: false,
          active: false,
          variant: 'pill',
          class: {
            link: [
              'hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50',
              'transition-colors before:transition-colors'
            ],
            linkLeadingIcon: [
              'group-hover:text-(--ui-text)',
              'transition-colors'
            ]
          }
        }
      ]
    }
  }
})
Customizing Link Sizes To customize the size of links, you can modify the padding in the orientation variants: 
export default defineAppConfig({
  ui: {
    navigationMenu: {
      variants: {
        orientation: {
          horizontal: {
            root: 'items-center justify-between',
            list: 'flex items-center',
            item: 'py-2', // Adjust vertical spacing
            link: 'px-3 py-2', // Adjust padding for horizontal links
            childList: 'grid p-2'
          },
          vertical: {
            root: 'flex-col',
            link: 'flex-row px-3 py-2' // Adjust padding for vertical links
          }
        }
      }
    }
  }
})
export default defineAppConfig({
  ui: {
    navigationMenu: {
      variants: {
        orientation: {
          horizontal: {
            root: 'items-center justify-between',
            list: 'flex items-center',
            item: 'py-2', // Adjust vertical spacing
            link: 'px-3 py-2', // Adjust padding for horizontal links
            childList: 'grid p-2'
          },
          vertical: {
            root: 'flex-col',
            link: 'flex-row px-3 py-2' // Adjust padding for vertical links
          }
        }
      }
    }
  }
})
Complete Example Here's a more complete example showing how to customize the UNavigationMenu: 
export default defineAppConfig({
  ui: {
    navigationMenu: {
      slots: {
        // You can customize base styles for each slot
        link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none',
        linkLeadingIcon: 'shrink-0 size-4', // Make icons smaller
      },
      variants: {
        // Define your custom color variants
        color: {
          primary: {
            link: 'focus-visible:before:ring-(--ui-primary)',
            childLink: 'focus-visible:outline-(--ui-primary)'
          },
          // Add your custom color
          custom: {
            link: 'focus-visible:before:ring-purple-500',
            childLink: 'focus-visible:outline-purple-500'
          }
        }
      },
      compoundVariants: [
        // Custom active state for your custom color
        {
          color: 'custom',
          variant: 'pill',
          active: true,
          class: {
            link: 'text-purple-500',
            linkLeadingIcon: 'text-purple-500 group-data-[state=open]:text-purple-500'
          }
        },
        // Custom hover state
        {
          color: 'custom',
          active: false,
          class: {
            link: [
              'hover:text-purple-400 hover:before:bg-purple-100/50',
              'transition-colors before:transition-colors'
            ],
            linkLeadingIcon: [
              'group-hover:text-purple-400',
              'transition-colors'
            ]
          }
        }
      ],
      defaultVariants: {
        color: 'custom', // Set your custom color as default
        variant: 'pill'
      }
    }
  }
})
export default defineAppConfig({
  ui: {
    navigationMenu: {
      slots: {
        // You can customize base styles for each slot
        link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none',
        linkLeadingIcon: 'shrink-0 size-4', // Make icons smaller
      },
      variants: {
        // Define your custom color variants
        color: {
          primary: {
            link: 'focus-visible:before:ring-(--ui-primary)',
            childLink: 'focus-visible:outline-(--ui-primary)'
          },
          // Add your custom color
          custom: {
            link: 'focus-visible:before:ring-purple-500',
            childLink: 'focus-visible:outline-purple-500'
          }
        }
      },
      compoundVariants: [
        // Custom active state for your custom color
        {
          color: 'custom',
          variant: 'pill',
          active: true,
          class: {
            link: 'text-purple-500',
            linkLeadingIcon: 'text-purple-500 group-data-[state=open]:text-purple-500'
          }
        },
        // Custom hover state
        {
          color: 'custom',
          active: false,
          class: {
            link: [
              'hover:text-purple-400 hover:before:bg-purple-100/50',
              'transition-colors before:transition-colors'
            ],
            linkLeadingIcon: [
              'group-hover:text-purple-400',
              'transition-colors'
            ]
          }
        }
      ],
      defaultVariants: {
        color: 'custom', // Set your custom color as default
        variant: 'pill'
      }
    }
  }
})
Using Your Custom Variants After defining your custom variants, you can use them in your components: 
<template>
  <UNavigationMenu 
    color="custom" 
    :items="items" 
    class="w-full" 
  />
</template>
<template>
  <UNavigationMenu 
    color="custom" 
    :items="items" 
    class="w-full" 
  />
</template>
The UNavigationMenu component in Nuxt UI 3 uses CSS variables for theming, which makes it flexible for customization. The examples above show how to modify colors and sizes by targeting specific states and elements within the component. Navigation Menu Theme Documentation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?