N
Nuxt•4mo ago
Uchuu

In a navigation menu, how can I hide the text in mobile views and only display the icon

<UNavigationMenu :items="items" color="secondary" class="pt-1"/>
<UNavigationMenu :items="items" color="secondary" class="pt-1"/>
const items = ref<NavigationMenuItem[]>([
  {
    label: 'Trending',
    to: '/',
    icon: 'i-lucide-trending-up',
  },
  {
    label: 'Cardiology',
    to: '/cardiology',
    icon: 'i-lucide-heart',
  },
  {
    label: 'Dermatology',
    to: '/dermatology',
    icon: 'i-lucide-sun',
  },
  {
    label: 'Neurology',
    to: '/neurology',
    icon: 'i-lucide-brain',
  },
  {
    label: 'Paediatrics',
    to: '/paediatrics',
    icon: 'i-lucide-baby',
  },
  {
    label: 'Surgery',
    to: '/surgery',
    icon: 'i-lucide-slice',
  },
])
const items = ref<NavigationMenuItem[]>([
  {
    label: 'Trending',
    to: '/',
    icon: 'i-lucide-trending-up',
  },
  {
    label: 'Cardiology',
    to: '/cardiology',
    icon: 'i-lucide-heart',
  },
  {
    label: 'Dermatology',
    to: '/dermatology',
    icon: 'i-lucide-sun',
  },
  {
    label: 'Neurology',
    to: '/neurology',
    icon: 'i-lucide-brain',
  },
  {
    label: 'Paediatrics',
    to: '/paediatrics',
    icon: 'i-lucide-baby',
  },
  {
    label: 'Surgery',
    to: '/surgery',
    icon: 'i-lucide-slice',
  },
])
2 Replies
kapa.ai
kapa.ai•4mo 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: ---------------------- To hide the text and only display the icon in a Nuxt UI navigation menu on mobile views, you can use Tailwind CSS utility classes to conditionally hide the label based on the screen size. While the official documentation does not provide a direct prop or built-in option for this, you can achieve it by customizing the slot for each item and applying responsive classes. Here's how you can do it using the #item-label slot and Tailwind's responsive utilities: 
<template>
  <UNavigationMenu :items="items" color="secondary" class="pt-1">
    <template #item-label>
      <span class="hidden sm:inline">
        <!-- This will hide the label on mobile (smaller than 'sm') and show on larger screens -->
        {{ $slotProps.item.label }}
      </span>
    </template>
  </UNavigationMenu>
</template>
<template>
  <UNavigationMenu :items="items" color="secondary" class="pt-1">
    <template #item-label>
      <span class="hidden sm:inline">
        <!-- This will hide the label on mobile (smaller than 'sm') and show on larger screens -->
        {{ $slotProps.item.label }}
      </span>
    </template>
  </UNavigationMenu>
</template>
This approach uses the hidden sm:inline classes to hide the label on mobile and show it on screens sm and up. The icon will always be visible since it's rendered by default when you provide the icon property in your items. Note: The documentation confirms you can use slots like #item-label to customize the rendering of each item, which enables this solution With tooltip in items. If you want to show a tooltip with the label when the text is hidden, you can also use the tooltip prop on the menu or individual items for a better mobile experience. If you need a more advanced or different approach, please let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@1035470271441805353> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?