Nuxt UI Header component
I am currently trying to implement the toggle of the Header component from v4.0.1. When I click the toggle it has this overlay(in black) that covers everything. I have tried :menu="{overlay: false}", tried hiding it via :ui prop etc but cannot get rid of it. Does anyone know how I can get to it?
2 Replies
Hi @OhNoPlata. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To remove the overlay (the black background) when opening the Nuxt UI Header menu, you should use the
Set
menu prop and set overlay: false. This is the documented way to control the overlay for the menu, and it should work for all modes (modal, slideover, drawer).
Example usage:
This should remove the overlay when the menu is open, according to the official documentation for the menu prop, which states that overlay controls whether an overlay is rendered behind the modal, and defaults to true Docs > Components > Header > API.
If you have already tried this and the overlay still appears, double-check that:
- You are not overriding the menu prop elsewhere.
- You are not using a custom slot or additional logic that might reintroduce the overlay.
- You are using the correct prop syntax and not passing overlay to the root UHeader instead of inside the menu object.
If you want to further customize the appearance or hide the overlay via CSS, you can also use the ui prop to target the overlay slot, but the recommended and supported way is through the menu prop as shown above.
If this does not work as expected in your version (v4.0.1), and you are certain the prop is set correctly, it may be a bug or a regression. In that case, consider checking for updates or reporting the issue to the Nuxt UI team.
Summary:Set
:menu="{ overlay: false }" on your UHeader component to remove the overlay when the menu is open. This is the officially documented approach for controlling the overlay in the header menu Docs > Components > Header > API.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@365967956401979394> Kapa.ai is still learning and improving, please let me know how I did by reacting below.