DraggableItemSideBar

Overview

DraggableItemSideBar creates a sidebar panel that can be dragged and expanded/collapsed. It is ideal for navigation menus or tool panels that need to be shown or hidden dynamically and repositioned by the user.

Only one sidebar is visible per edge. If several sidebars share the same location, the active panel shows a menu button to switch between them. Switcher labels come from the title string stored in the drag store — always pass title even when using a custom #title / titleNode for the header.

Props

Prop	Description	Type	Required	Default Value
id	Stable item id for store commands / remount.	string	false	auto UUID
show	Controls the visibility of the sidebar.	boolean	false	false
expand	Whether the sidebar is expanded.	boolean	false	false
width	Width of the sidebar.	number,string	false	'auto'
location	Sidebar position: 'left', 'right', 'top', 'bottom'.	string	false	'left'
title	Plain title for switcher store and default header.	string	false	-
titleNode	React only: custom header node (Vue #title slot). Falls back to title.	ReactNode	false	-
disabledExpand	Disables the expand/collapse feature.	boolean	false	false
disabledHeader	Hides the header section.	boolean	false	false
disabledClose	Hides the close button.	boolean	false	false
containerId	ID of the parent container (for teleporting).	string	false	-

Events

Name	Description
update:expand	Emitted when the expand state changes. Payload: (value:boolean)
close	Emitted when the sidebar is closed. Payload: ()
update:show	Emitted when the visibility changes. Payload: (value:boolean)

React: use onUpdateShow / onUpdateExpand / onClose.

Slots

Header layout: [ pre-title ] [ title | after-title ] …… spacer …… [ extra-btn ]. Full contract: header-slots.md.

Vue	React	Description
default	children	Content of the sidebar.
title (prop)	title	Plain string for the switcher menu and default header.
title (slot)	titleNode	Custom header title node; falls back to title.
after-title	afterTitle	Immediately after title (before spacer).

Usage

Vue

<script setup lang="ts">
import { DraggableContainer, DraggableItemSideBar } from '@hungpvq/vue-draggable';
</script>

<template>
  <DraggableContainer>
    <DraggableItemSideBar title="Title" show location="right">
      <div style="height: 100vh"></div>
    </DraggableItemSideBar>
  </DraggableContainer>
</template>

React

import { DraggableContainer, DraggableItemSideBar } from '@hungpvq/react-draggable';

export function Example() {
  return (
    <DraggableContainer>
      <DraggableItemSideBar title="Title" show location="right">
        <div style={{ height: '100vh' }} />
      </DraggableItemSideBar>
    </DraggableContainer>
  );
}

Accessibility

role="complementary" + aria-labelledby; Escape closes when focus is in the shell; switcher menu ARIA + focus restore. See a11y.md.