Nuxt•4mo ago

Nuxt ui drawer set z layer to lower than that of another object?

I have a bottom menu stuck to the bottom of my screen on mobile and I want to use a drawer component as a sub menu which slides in from underneath this bottom menu. I tried manually setting z-10 on the UDrawer and z-20 on my bottom navbar stuck to the bottom of the screen on mobile however the drawer is always above it. is there a way to do this?

26 Replies

kapa.ai•4mo ago

Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not provide explicit information on how to set the z-index (z-layer) of the Nuxt UI <UDrawer> component to be lower than another object, such as a fixed bottom navbar. The documentation covers customization of the drawer's appearance, direction, overlay, and other behaviors, but does not mention a prop or slot for directly controlling the z-index or stacking context of the drawer or its overlay. The theme configuration for the drawer does show that the overlay and content use utility classes (e.g., fixed inset-0 bg-elevated/75 for the overlay), but there is no mention of a z-index utility or prop that you can override via component props or slots. There is also no documented ui prop or slot for passing custom classes to adjust the z-index directly from the component usage side Drawer Theme. If you need to control the z-index, you may need to inspect the rendered DOM and override the styles via global CSS, but this approach is not covered in the official documentation. If you require a supported solution, you may want to open a feature request or discussion on the Nuxt UI GitHub repository. In summary:
There is no documented way in the official Nuxt UI Drawer component to set its z-index below another element such as a bottom navbar. The knowledge sources do not contain enough information to provide a supported solution for this use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

WiFi PlugOP•4mo ago

@kapa.ai could it be something to do with fixed / absolute / relative positioning maybe? I've tried to set a z index on every item i see in inspect element to do with it manually but even then it's still above everything

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not provide explicit details about how the positioning (fixed, absolute, relative) of the <UDrawer> component or its overlay might affect z-index stacking in relation to other elements on the page. However, from the theme configuration, we can see that both the drawer's overlay and content use the fixed positioning utility by default (overlay: 'fixed inset-0 ...', content: 'fixed ...') Drawer Theme. In CSS, elements with position: fixed are placed relative to the viewport and create their own stacking context, which can make it difficult to layer them beneath other elements, especially if those elements are also fixed or have a higher z-index in a different stacking context. Even if you set a lower z-index on the drawer, if your navbar is not in the same stacking context or is rendered after the drawer in the DOM, it may still appear below the drawer. The documentation does not mention a supported way to change the positioning mode or stacking context of the drawer via props or slots. If you have already tried manually setting z-index on all relevant elements and it still does not work, it is likely due to the stacking context created by the drawer's fixed positioning, which is not easily overridden without modifying the component's internal structure or using custom CSS targeting the drawer's classes. In summary:
The knowledge sources do not provide a documented solution for changing the stacking order of the <UDrawer> relative to other fixed elements. The issue is likely related to the use of fixed positioning and stacking contexts, but there is no official guidance on how to resolve this within Nuxt UI's documented features Drawer Theme. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

WiFi PlugOP•4mo ago

@kapa.ai if i stick the drawer component into a div with a set z-index along with my bottom navbar i want to appear above the udrawer could that work? as I'm trying that currently but maybe i need to set the relative / absolute or z indexes correctly in this case?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not explicitly document whether wrapping the <UDrawer> and your bottom navbar in a parent <div> with a set z-index will allow you to control their stacking order. However, based on the theme configuration, the <UDrawer>'s overlay and content are rendered with position: fixed by default (overlay: 'fixed inset-0 ...', content: 'fixed ...'), which means they are positioned relative to the viewport, not their parent container. This typically causes them to escape any stacking context created by a parent <div> with relative or absolute positioning and a z-index Drawer Theme. Therefore, simply wrapping both components in a parent with a z-index is unlikely to affect the drawer's stacking order, since fixed elements are not affected by the z-index of ancestor stacking contexts unless those ancestors are also fixed or have a transformed stacking context. The knowledge sources do not provide a documented way to change the drawer's positioning mode or stacking context via props or configuration. If you need to control the stacking order, you may need to use custom CSS targeting the drawer's internal classes, but this is not covered in the official documentation. Summary:
Wrapping <UDrawer> and your navbar in a parent <div> with a set z-index will likely not work as intended due to the drawer's use of position: fixed. The knowledge sources do not provide a supported or documented solution for this scenario Drawer Theme. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

WiFi PlugOP•4mo ago

@kapa.ai where should i set a custom variable for my bottom navbar height? similar to how the navbar has a variable i can use

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To set a custom variable for your bottom navbar height—similar to how the header uses the --ui-header-height CSS variable—you should define your own CSS variable in your global styles (for example, in your main CSS file or a relevant layout/style block). For example, the header height is set like this:

:root {
  --ui-header-height: --spacing(16);
}

:root {
  --ui-header-height: --spacing(16);
}

Main Component Usage You can define your own variable for the bottom navbar:

:root {
  --ui-bottom-navbar-height: 4rem; /* or any value you need */
}

:root {
  --ui-bottom-navbar-height: 4rem; /* or any value you need */
}

You can then use this variable in your CSS to position or size elements relative to your bottom navbar, just as Nuxt UI components use --ui-header-height for the header. The knowledge sources do not mention a built-in variable for the bottom navbar, so you will need to create and manage this variable yourself in your styles. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

WiFi PlugOP•4mo ago

@kapa.ai recommended way to set drawer max width? say to 80% screen width? with minimum at 60%

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not provide a dedicated prop on the <UDrawer> component for directly setting the max width or min width as a percentage of the screen. However, you can control the width of the drawer by passing custom classes via the ui prop, specifically targeting the container or content slot, as shown in the examples:

<UDrawer
  :ui="{ container: 'max-w-[80vw] min-w-[60vw]' }"
>
  <!-- Drawer content -->
</UDrawer>

<UDrawer
  :ui="{ container: 'max-w-[80vw] min-w-[60vw]' }"
>
  <!-- Drawer content -->
</UDrawer>

This approach uses Tailwind CSS utility classes (max-w-[80vw] and min-w-[60vw]) to set the maximum and minimum width to 80% and 60% of the viewport width, respectively. This method is demonstrated in the documentation for customizing the drawer's container width Drawer with Footer Example. If you need more control, you can also target the content slot with the ui prop. Summary:
Use the ui prop with Tailwind CSS classes to set the drawer's max and min width as a percentage of the screen, e.g., :ui="{ container: 'max-w-[80vw] min-w-[60vw]' }" Drawer with Footer Example. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

WiFi PlugOP•4mo ago

@kapa.ai

<template>
  <div class="min-h-screen flex flex-col">
    <!-- Main content grows to fill space above footer -->
    <div class="flex-grow">
      <p class="p-4">Main page content goes here.</p>
    </div>

    <!-- Footer section with drawer -->
    <div class="relative">
      <!-- Drawer -->
      <UDrawer direction="bottom" v-model:open="open">
        <template #content>
          <div class="min-w-96 min-h-96 p-4">
            <p>This is my drawer content blah blah blah</p>
          </div>
        </template>

        <template #footer>
          <!-- Padding so drawer content doesn't get hidden behind navbar -->
          <div class="h-14"></div>
        </template>
      </UDrawer>

      <!-- Bottom Navbar -->
      <nav
        class="fixed bottom-0 left-0 w-full h-14 z-9999 flex items-center justify-around bg-muted border-t border-accented"
      >
        <ULink to="#" class="flex-grow flex justify-center items-center h-full">
          <UIcon name="i-lucide-home" class="size-5" />
        </ULink>
        <ULink to="#" class="flex-grow flex justify-center items-center h-full">
          <UIcon name="i-lucide-home" class="size-5" />
        </ULink>
        <ULink
          class="flex-grow flex justify-center items-center h-full"
          @click.prevent="open = !open"
        >
          <UIcon name="i-lucide-settings" class="size-5" />
        </ULink>
      </nav>
    </div>
  </div>
</template>

<script setup lang="ts">
const open = ref(false);
</script>

<template>
  <div class="min-h-screen flex flex-col">
    <!-- Main content grows to fill space above footer -->
    <div class="flex-grow">
      <p class="p-4">Main page content goes here.</p>
    </div>

    <!-- Footer section with drawer -->
    <div class="relative">
      <!-- Drawer -->
      <UDrawer direction="bottom" v-model:open="open">
        <template #content>
          <div class="min-w-96 min-h-96 p-4">
            <p>This is my drawer content blah blah blah</p>
          </div>
        </template>

        <template #footer>
          <!-- Padding so drawer content doesn't get hidden behind navbar -->
          <div class="h-14"></div>
        </template>
      </UDrawer>

      <!-- Bottom Navbar -->
      <nav
        class="fixed bottom-0 left-0 w-full h-14 z-9999 flex items-center justify-around bg-muted border-t border-accented"
      >
        <ULink to="#" class="flex-grow flex justify-center items-center h-full">
          <UIcon name="i-lucide-home" class="size-5" />
        </ULink>
        <ULink to="#" class="flex-grow flex justify-center items-center h-full">
          <UIcon name="i-lucide-home" class="size-5" />
        </ULink>
        <ULink
          class="flex-grow flex justify-center items-center h-full"
          @click.prevent="open = !open"
        >
          <UIcon name="i-lucide-settings" class="size-5" />
        </ULink>
      </nav>
    </div>
  </div>
</template>

<script setup lang="ts">
const open = ref(false);
</script>

I made this basic reproduction, do you see anything that could be the issue?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Your reproduction is well-structured, but based on the knowledge sources, the main issue is likely due to the <UDrawer> component using position: fixed for its overlay and content by default, as defined in its theme configuration (content: 'fixed ...'). This means the drawer will always be rendered above other elements on the page, regardless of where you place it in your template or what z-index you set on parent containers or siblings. The z-index of the drawer is not directly configurable via a prop or slot, and wrapping it in a relative parent will not affect its stacking context because of the fixed positioning Drawer Theme. Even if you set a very high z-index (like z-9999) on your bottom navbar, the drawer's fixed positioning and its own stacking context will typically cause it to appear above the navbar. The knowledge sources do not provide a documented way to change this behavior or to set the drawer's z-index below another element. Summary:
The issue is not with your template structure, but with the way <UDrawer> is implemented using position: fixed, which causes it to always appear above other elements, regardless of z-index settings on siblings or parents. There is no documented way in Nuxt UI to change this stacking order Drawer Theme. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

WiFi PlugOP•4mo ago

@kapa.ai can i remove the position fixed maybe by adjusting the :ui={} thing?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not explicitly state that you can remove or override the position: fixed style of the <UDrawer> component by using the :ui prop. The theme configuration shows that the content and overlay slots use the fixed utility class by default (content: 'fixed bg-default ...'), and while the ui prop allows you to pass custom classes to these slots, there is no documentation confirming that you can remove or replace the fixed class this way Drawer Theme. If you attempt to override the positioning by passing a different class (e.g., relative or absolute) via the :ui prop, the outcome is uncertain because the documentation does not specify whether your custom class will take precedence over the default fixed class, or if the component will merge or override these classes. Summary:
The knowledge sources do not provide enough information to confirm that you can remove or change the position: fixed of <UDrawer> using the :ui prop. This behavior is not documented, so results may be unpredictable if you attempt it Drawer Theme. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

WiFi PlugOP•4mo ago

@kapa.ai what if i applied the same principles udrawer is using to always be on top to my bottom navbar? could that work? what classes would appear top most

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, the <UDrawer> component appears "on top" because its overlay and content use the Tailwind CSS utility class fixed, which positions them relative to the viewport, and likely includes a high stacking context (z-index) in its theme configuration (overlay: 'fixed inset-0 bg-elevated/75', content: 'fixed bg-default ...') Drawer Theme. If you want your bottom navbar to always appear above the drawer, you would need to: 1. Use fixed positioning for your navbar, just like the drawer. 2. Set a higher z-index on your navbar than the drawer's overlay/content. However, the knowledge sources do not specify the exact z-index values used by <UDrawer>, so you may need to inspect the rendered DOM to determine the drawer's z-index and then set your navbar's z-index higher. For example, you might use:

<nav class="fixed bottom-0 left-0 w-full h-14 z-[9999] ...">
  <!-- Navbar content -->
</nav>

<nav class="fixed bottom-0 left-0 w-full h-14 z-[9999] ...">
  <!-- Navbar content -->
</nav>

The class z-[9999] sets a very high z-index, which should place your navbar above most elements, including the drawer, provided the drawer's z-index is lower. Summary:
Applying fixed positioning and a higher z-index to your bottom navbar, similar to how <UDrawer> is styled, should allow it to appear above the drawer. The exact z-index needed depends on the drawer's implementation, which is not detailed in the knowledge sources Drawer Theme. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

WiFi PlugOP•4mo ago

@kap @kapa.ai

<UDrawer
        direction="bottom"
        v-model:open="open"
        :ui="{
          slots: {
            overlay: 'absolute inset-0 bg-red-500/75 z-50',
            content:
              'absolute bg-default ring ring-default flex focus:outline-none z-50',
          },
        }"
      >

<UDrawer
        direction="bottom"
        v-model:open="open"
        :ui="{
          slots: {
            overlay: 'absolute inset-0 bg-red-500/75 z-50',
            content:
              'absolute bg-default ring ring-default flex focus:outline-none z-50',
          },
        }"
      >

should this be valid as it doesnt seem to edit the color of the overlay?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, your usage of the :ui prop with the slots object is consistent with the documented approach for customizing slot classes in Nuxt UI components. For example, the documentation shows:

:ui="{
  trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
}"

:ui="{
  trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
}"

and in the global config:

ui: {
  button: {
    slots: {
      base: 'group font-bold',
      trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
    }
  }
}

ui: {
  button: {
    slots: {
      base: 'group font-bold',
      trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
    }
  }
}

Component Customization However, for <UDrawer>, the documentation does not explicitly show using a slots key inside the :ui prop at the component level. Instead, it shows passing class names directly for each slot, like:

:ui="{ container: 'max-w-[80vw] min-w-[60vw]' }"

:ui="{ container: 'max-w-[80vw] min-w-[60vw]' }"

Drawer Props So, your code:

:ui="{
  slots: {
    overlay: 'absolute inset-0 bg-red-500/75 z-50',
    content: 'absolute bg-default ring ring-default flex focus:outline-none z-50',
  },
}"

:ui="{
  slots: {
    overlay: 'absolute inset-0 bg-red-500/75 z-50',
    content: 'absolute bg-default ring ring-default flex focus:outline-none z-50',
  },
}"

may not work as expected because the slots key is not documented for per-component usage. Instead, you should pass the slot classes directly:

:ui="{
  overlay: 'absolute inset-0 bg-red-500/75 z-50',
  content: 'absolute bg-default ring ring-default flex focus:outline-none z-50'
}"

:ui="{
  overlay: 'absolute inset-0 bg-red-500/75 z-50',
  content: 'absolute bg-default ring ring-default flex focus:outline-none z-50'
}"

Summary:
You should not use the slots key inside the :ui prop at the component level for <UDrawer>. Pass the slot classes directly as keys in the :ui object. This should allow you to customize the overlay color and other styles as intended Drawer Props. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

Gaming

Programming

Nuxt ui drawer set z layer to lower than that of another object?

Did you find this page helpful?