Drawer - horizontal menu with dropdown button?

[GregorWedlich]

Hello!

I have a horizontal menu that is located in a drawer. In the menu there is a dropdown button that is cut off in the bottom part. Z-index did not help here. Does anyone have a tip?

<header>
	<div class="drawer drawer-end">
		<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
		<div class="drawer-content flex flex-col">
			<div class="navbar mb-2 flex">
				<!-- Logo -->
				<div class="mx-2 flex-1 px-2">
					<img class="hidden md:block md:w-48" src="" alt="" />
					<img class="h-6 md:hidden" src="" alt="" />
				</div>
				<!-- Hamburger -->
				<div class="flex-none lg:hidden">
					<label for="my-drawer-3" class="btn btn-ghost btn-square">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
						</svg>
					</label>
				</div>

				<!-- Content Desktop -->
				<div class="hidden flex-none lg:block">
					<!-- Nav links -->
					<ul class="menu menu-horizontal hidden items-center justify-end gap-6 text-xl uppercase sm:flex">
						<li class="link-underline cursor-pointer">Why</li>
						<li class="link-underline cursor-pointer">Blog</li>
						<li class="link-underline cursor-pointer">Docs</li>
						<li class="link-underline cursor-pointer">About</li>
						<li class="link-underline cursor-pointer">FAQ</li>
						<!-- Dropdown Button with Nav links-->
						<div class="dropdown-end dropdown-hover dropdown">
							<div tabindex="0" class="btn text-[18px] font-normal">Services</div>
							<ul tabindex="0" class="dropdown-content rounded-box bg-neutral text-lg text-white shadow-2xl">
								<li><a>link 1</a></li>
                <li><a>link 2</a></li>
							</ul>
						</div>

						<div class="m-4 inline-grid grid-cols-2">
							<svg xmlns="http://www.w3.org/2000/svg" class="col-start-1 row-start-1 m-1 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="1"
									d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
								/>
							</svg>

							<svg xmlns="http://www.w3.org/2000/svg" class="col-start-2 row-start-1 m-1 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path
									troke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
								/>
							</svg>

							<input
								type="checkbox"
								checked="checked"
								data-toggle-theme="light,dark"
								class="toggle toggle-lg col-span-2 col-start-1 row-start-1 bg-transparent [--b1:219_14%_80%] checked:[--b1:215_28%_17%]"
							/>
						</div>
					</ul>
				</div>
			</div>
		</div>

		<div class="drawer-side">
			<label for="my-drawer-3" class="drawer-overlay"></label>
			<ul class="menu w-80 overflow-y-auto bg-base-100 p-4">
				<li>
					<a>Link 1</a>
				</li>
				<li>
					<a>Link 2</a>
				</li>
			</ul>
		</div>
	</div>
</header>

[saadeghi]

Here's a fix: https://play.tailwindcss.com/9WDhhxjVvB
The problem is: horizontal menu is using a overflow-hidden and that doesn't play well with dropdown. So we need a overflow-visible on menu.
There is also another problem: menu adds a horizontal padding to all items (including the submenu) so I added !p-0 to fix that.

These issues will be fixed in daisyUI 2.0 which is currently in development.
But for now, I would suggest using a row of buttons if you need a dropdown inside it. This will result a better visual:
https://play.tailwindcss.com/fZpvZHC57w

[GregorWedlich]

Wow! That was really fast. I think the second solution is really better.

Now I have another problem, is it necessary that the page content is inside the drawer class? I would like to separate that, but there I always get a problem with the overlay (h-screen) and absolute and relative.

And with "top-" the Content overlap the dropdown menu :D

https://play.tailwindcss.com/Jj7AYJy0r5?size=786x720

[saadeghi]

Everything you want to be under the overlay, must be inside drawer-content including navbar and all other page content.
https://play.tailwindcss.com/UME1FQqhbr?size=650x720

The structure is like this:

drawer
- drawer-toggle // the checkbox that controls drawer open/close
- drawer-content // page content
  - navbar (optional)
  - any page content
- drawer-side // the sidebar
  - drawer-overlay // the gray overlay
  - // sidebar content (menu or anything)

This was the simplest structure I could come up with to have the required functionality. It's a grid layout and opens/closes sidebar or make it look fixed or can be placed left/right.

[GregorWedlich]

Thanks for your explanation! I think now I understand how the drawer works and can continue to work with it :)

[saadeghi]

menu on daisyUI v2.0 is no longer using overflow-hidden
It also supports nested <ul> now:
https://daisyui.com/components/menu

[telkins]

Is this still happening...?

I just installed to play around and pasted navbar markup (responsive (dropdown menu on small screen, center menu on large screen)) followed by table markup (Table with visual elements)...both from the examples in the docs.

I get this:

I'm happy to share my markup...but hoping there's a quick answer because I'm doing something silly. 😜

[devNamanG]

Hey! Did you find a solution? I am having the same problem

[saadeghi]

My friends, we can't help if you don't provide a sample code or a reproduction repo 🤷‍♂️

[rhscjohn-dev]

If I understand the problem, the dropdown is hidden by the table, then the fix is rather simple. Add a class z-10.

Here is a Tailwind Play Eample. The magic is on line 32. Note: you need to make the screen wide enough so the the Nav Component is displayed horizontal at the top.

Hope this solves your problem.

[devNamanG]

Sorry for the late reply and thank you @rhscjohn-dev for the help :)! I ended up going by a different approach altogether. I used a row of buttons and dropdown-buttons for this purpose.