Sidebar New · experimental

<GoopSidebarProvider>
  <GoopSidebar>
    <GoopSidebarContent>
      <GoopSidebarGroup>
        <GoopSidebarGroupLabel>Platform</GoopSidebarGroupLabel>
        <GoopSidebarMenu>
          <GoopSidebarMenuItem>
            <GoopSidebarMenuButton is-active tooltip="Dashboard">
              <HomeIcon />
              <span>Dashboard</span>
            </GoopSidebarMenuButton>
          </GoopSidebarMenuItem>
          <GoopSidebarMenuItem>
            <GoopSidebarMenuButton tooltip="Inbox">
              <InboxIcon />
              <span>Inbox</span>
            </GoopSidebarMenuButton>
          </GoopSidebarMenuItem>
        </GoopSidebarMenu>
      </GoopSidebarGroup>
    </GoopSidebarContent>
    <GoopSidebarRail />
  </GoopSidebar>
  <GoopSidebarInset>
    <header class="flex h-12 items-center gap-2 border-b px-3">
      <GoopSidebarTrigger />
    </header>
  </GoopSidebarInset>
</GoopSidebarProvider>

GoopSidebar is shadcn-vue's Sidebar with the same parts and API: useSidebar(), the sidebar_state cookie, the Ctrl/Cmd+B shortcut, side, variant, collapsible, and a sheet below 768px. Swap the imports and you're done.

Installation#

Nuxt#

pnpm add @goopui/nuxt

export default defineNuxtConfig({
  modules: ['@goopui/nuxt'],
})

The module auto-imports every GoopSidebar* part, adds goop.css, and points Tailwind at the component classes. It needs Tailwind CSS v4 and shadcn's sidebar tokens (--sidebar, --sidebar-accent, --sidebar-border, ...).

Vue#

pnpm add @goopui/vue

@import "tailwindcss";
@import "@goopui/vue/goop.css";

Usage#

<script setup lang="ts">
// Nuxt auto-imports these. In plain Vue, import them from '@goopui/vue'.
</script>

<template>
  <GoopSidebarProvider>
    <GoopSidebar collapsible="icon">
      <GoopSidebarHeader>...</GoopSidebarHeader>
      <GoopSidebarContent>
        <GoopSidebarGroup>
          <GoopSidebarGroupLabel>Platform</GoopSidebarGroupLabel>
          <GoopSidebarMenu>
            <GoopSidebarMenuItem>
              <GoopSidebarMenuButton is-active tooltip="Dashboard">
                <House /><span>Dashboard</span>
              </GoopSidebarMenuButton>
            </GoopSidebarMenuItem>
            <GoopCollapsible as-child class="group/collapsible">
              <GoopSidebarMenuItem>
                <GoopCollapsibleTrigger as-child>
                  <GoopSidebarMenuButton tooltip="Documentation">
                    <BookOpen /><span>Documentation</span>
                  </GoopSidebarMenuButton>
                </GoopCollapsibleTrigger>
                <GoopCollapsibleContent>
                  <GoopSidebarMenuSub>
                    <GoopSidebarMenuSubItem>
                      <GoopSidebarMenuSubButton href="#">Introduction</GoopSidebarMenuSubButton>
                    </GoopSidebarMenuSubItem>
                  </GoopSidebarMenuSub>
                </GoopCollapsibleContent>
              </GoopSidebarMenuItem>
            </GoopCollapsible>
          </GoopSidebarMenu>
        </GoopSidebarGroup>
      </GoopSidebarContent>
      <GoopSidebarFooter>...</GoopSidebarFooter>
      <GoopSidebarRail />
    </GoopSidebar>
    <GoopSidebarInset>
      <header><GoopSidebarTrigger /></header>
      <!-- your page -->
    </GoopSidebarInset>
  </GoopSidebarProvider>
</template>

The parts are GoopSidebarProvider, GoopSidebar, GoopSidebarTrigger, GoopSidebarRail, GoopSidebarInset, GoopSidebarHeader, GoopSidebarFooter, GoopSidebarContent, GoopSidebarGroup (with Label, Action, Content), GoopSidebarMenu (with Item, Button, Action, Badge, Skeleton, Sub, SubItem, SubButton), GoopSidebarSeparator, and GoopSidebarInput. useSidebar() returns state, open, setOpen, isMobile, openMobile, setOpenMobile, and toggleSidebar.

Behavior#

• Highlight. Hovering or tabbing through the menu moves one goo blob between the items. It travels with momentum, stretches a little, and its soft swell follows the cursor along the item (highlight, followPointer).
• Active item. The active item is a soft filled pill with a hint of the accent and a faint rim (pill).
• Edge slosh. When the sidebar collapses or expands, its inner edge is goo with inertia. A collapse pushes low, wide mounds out of the edge while it moves and lets them slosh back. An expand lands with a gentle overshoot. The mounds are placed differently every time, and at rest the edge is the sidebar's own (slosh).
• Sub-menus. A GoopCollapsible inside the sidebar floods its row from where you clicked and springs the sub-menu open (submenus).
• Icon mode. Collapsed to icons, each button's tooltip is a GoopTooltip that blooms beside it (tooltips).
• Mobile. Below 768px the sidebar is a sheet that blooms from the middle of its screen edge (bloom).
• No layout cost. The goo is drawn on aria-hidden layers behind the real content. It never changes the page's scroll size.

Turning effects off#

Every effect is a prop on GoopSidebar:

<GoopSidebar :slosh="false" />
<GoopSidebar :slosh="1.6" preset="wild" />
<GoopSidebar :highlight="false" :pill="false" />
<GoopSidebar :goo="false" />

Props#

The other parts take shadcn-vue's props. GoopSidebarMenuButton takes variant (default | outline), size (default | sm | lg), isActive, tooltip, as, and asChild. GoopSidebarProvider takes defaultOpen, open (v-model:open), and class. GoopSidebar takes these:

Accessibility#

Keyboard focus, the Ctrl/Cmd+B shortcut, the mobile sheet's focus trap, and the tooltips come from the same reka-ui primitives as shadcn-vue. Every goo layer is aria-hidden and can't be clicked, and text is never filtered. Under reduced motion the edge doesn't slosh, the highlight snaps between items, and the sheet, tooltips, and sub-menus open plainly. See Accessibility & reduced motion.