Nuxt•4mo ago

Styling Dropdown

How do I style the dropdown?

5 Replies

Hi @ethan!. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To style the Nuxt UI DropdownMenu component, you have several options: 1. Using the ui Prop
You can pass a ui prop to the <UDropdownMenu> component to override or extend specific classes for different parts of the dropdown, such as content, viewport, arrow, group, label, item, and more. For example:

   <UDropdownMenu
     :items="items"
     :ui="{
       content: 'w-48 bg-white shadow-lg',
       item: 'text-primary hover:bg-primary/10',
       label: 'font-bold'
     }"
   >
     <UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
   </UDropdownMenu>

   <UDropdownMenu
     :items="items"
     :ui="{
       content: 'w-48 bg-white shadow-lg',
       item: 'text-primary hover:bg-primary/10',
       label: 'font-bold'
     }"
   >
     <UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
   </UDropdownMenu>

The ui prop accepts an object where each key corresponds to a slot or element in the dropdown. You can see all available keys in the Props table and the Theme section. 2. Global Theming via app.config.ts
For global customization, you can define styles in your app.config.ts under the ui.dropdownMenu key. This allows you to set default classes for all dropdown menus in your app:

   // app.config.ts
   export default defineAppConfig({
     ui: {
       dropdownMenu: {
         slots: {
           content: 'min-w-32 bg-default shadow-lg rounded-md',
           item: 'text-default hover:bg-primary/10',
           // ...other slots
         },
         // ...variants, sizes, etc.
       }
     }
   })

   // app.config.ts
   export default defineAppConfig({
     ui: {
       dropdownMenu: {
         slots: {
           content: 'min-w-32 bg-default shadow-lg rounded-md',
           item: 'text-default hover:bg-primary/10',
           // ...other slots
         },
         // ...variants, sizes, etc.
       }
     }
   })

See the Theme section for all available slots and variant options. 3. Variants and Sizes
The dropdown supports variants for color, active state, loading, and size. You can set the size prop (e.g., "sm", "md", "lg", etc.) to adjust padding, font size, and icon size. You can also use the color property on items for contextual coloring. 4. Compound Variants
Advanced styling can be achieved using compound variants in your theme configuration, allowing you to target combinations of props like color and active for specific styles. For more details and examples, refer to the DropdownMenu Theme documentation and the Props section. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

ethan!OP•4mo ago

@kapa.ai but heres my error: Object literal may only specify known properties, and 'dropdownMenu' does not exist in type 'Partial<ModuleOptions>'.ts(2353) schema.d.ts(57, 5): The expected type comes from property 'ui' which is declared here on type 'InputConfig<NuxtConfig, ConfigLayerMeta>'

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The error you're seeing—'dropdownMenu' does not exist in type 'Partial<ModuleOptions>'—suggests that the property you're trying to use in your app.config.ts is not recognized. This is likely due to changes in the theming system in Nuxt UI v3. According to the migration guide, the theming system has been updated, and all overrides using the ui key in app.config.ts must follow the new structure. You should check the Theme section of each component's documentation to ensure you're using the correct keys and structure. For example, the correct way to override the dropdown menu theme in app.config.ts is:

export default defineAppConfig({
  ui: {
    dropdownMenu: {
      slots: {
        content: 'min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden',
        // ...other slots
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    dropdownMenu: {
      slots: {
        content: 'min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden',
        // ...other slots
      }
    }
  }
})

Make sure you are not using any obsolete or incorrect keys, and that your Nuxt UI version supports the dropdownMenu key under ui. If you are using an older version or the wrong key, you will get this type error. The documentation emphasizes that you should always refer to the latest Theme section for each component to get the correct structure and keys to use in your configuration Updated theming system DropdownMenu Theme. If you are still seeing this error after following the documentation, double-check that your Nuxt UI package is up to date and that you are not mixing up v2 and v3 configuration styles. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

Gaming

Programming

Styling Dropdown

Did you find this page helpful?