Sidebar footer issue

[Kumzy]

Environment

Operating system	macOS 25.2.0
CPU	Apple M4 Pro (14 cores)
Node.js version	v22.14.0
nuxt/cli version	3.34.0
Package manager	bun@1.3.11
Nuxt version	-
Nitro version	-
Builder	vite@8.0.1
Config	-
Modules	-

Is this bug related to Nuxt or Vue?

Vue

Package

v4.x

Version

4.5.1

Reproduction

<script setup lang="ts">
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";

import type { NavigationMenuItem } from "@nuxt/ui";

const { t } = useI18n();
const open = ref(false);
const collapsed = ref(false);

const links = computed(() => {
  const items: NavigationMenuItem[] = [
    {
      label: t("nav.home"),
      icon: "i-lucide-house",
      to: "/",
    },
    {
      label: t("nav.dashboard"),
      icon: "i-lucide-layout-dashboard",
      to: "/dashboard/",
    },
    {
      label: t("nav.settings"),
      icon: "i-lucide-settings",
      to: "/user/settings/",
    },
  ];
  
  return items;
});

const footerItems = computed((): NavigationMenuItem[] => [
  {
    label: t("nav.help"),
    icon: "i-lucide-circle-help",
    to: "/help/",
  },
  {
    label: t("nav.collapseSidebar"),
    icon: collapsed.value ? "i-lucide-panel-right-close" : "i-lucide-panel-left-close",
    onSelect: () => { collapsed.value = !collapsed.value; },
  },
]);

const groups = computed(() => [
  {
    id: "links",
    label: t("nav.goTo"),
    items: links.value,
  },
]);
</script>

<template>
  <UDashboardGroup unit="rem" storage="local">
    <UDashboardSidebar
      id="default"
      v-model:open="open"
      v-model:collapsed="collapsed"
      collapsible
      resizable
      class="bg-elevated/25"
      :ui="{ footer: 'lg:border-t lg:border-default' }"
    >

      <template #default="{ collapsed }">

        <UNavigationMenu
          :collapsed="collapsed"
          :items="links"
          orientation="vertical"
          tooltip
          popover
        />
        <UNavigationMenu
          :collapsed="collapsed"
          :items="footerItems"
          orientation="vertical"
          tooltip
          popover
        />
      </template>

      <template #footer="{ collapsed }">
        <UNavigationMenu
          :collapsed="collapsed"
          :items="footerItems"
          orientation="vertical"
          tooltip
          popover
        />
      </template>
    </UDashboardSidebar>

  

    <UDashboardPanel id="home">
      <template #header>
      </template>

      <template #body>
        <slot />
      </template>
    </UDashboardPanel>
  </UDashboardGroup>
</template>

Description

It seems the controls in the footer does not resize correctly (text truncated/shrinking) compared to when it's in default slot

I placed the same items in the footer and in the default and the behavior is not the same

Additional context

No response

Logs

[howwohmm]

I can look into this — the footer slot is missing overflow constraints that the body slot has, causing content (like UNavigationMenu) to not resize correctly when the sidebar width changes.

Will submit a PR shortly.

[benjamincanac]

See #6232 (comment)