ToggleDrawer

pro

ToggleDrawer moves supplementary navigation or settings content into an edge drawer behind a compact trigger.

Installation

Add this component with the NateUI CLI.

npx nateui@latest add ToggleDrawer

pnpm dlx nateui@latest add ToggleDrawer

yarn dlx nateui@latest add ToggleDrawer

API

ToggleDrawer owns its open state and accepts Drawer props except isOpen. The built-in trigger toggles the drawer; use the custom ref when another control needs to open or close it.

Prop	Description	Type	Default
`children`	Content rendered in the scrollable drawer body.	`ReactNode`	—
`placement`	Edge the drawer opens from. Top and bottom placements add a drag handle.	`DrawerPlacement`	`'left'`
`title`	Content rendered in the drawer header.	`string	ReactNode`
`bodyClass`	Extra classes applied to the scrollable body.	`string`	—
`closable`	Shows the default close button in the header.	`boolean`	`true`
`contentClassName`	Classes applied to the drawer surface.	`string`	—
`footer`	Content rendered in the fixed footer region.	`string	ReactNode`
`footerClass`	Extra classes applied to the footer.	`string`	—
`headerClass`	Extra classes applied to the header.	`string`	—
`height`	Drawer height for top or bottom placement.	`string	number`
`lockScroll`	Locks document scrolling while the overlay is mounted.	`boolean`	`true`
`onClose`	Callback forwarded to Drawer for close requests. Supplying it replaces ToggleDrawer's internal close handler.	`DrawerOpenChangeHandler`	—
`onOpen`	Callback forwarded to Drawer when it opens.	`DrawerOpenChangeHandler`	—
`overlayClassName`	Classes applied to the backdrop overlay.	`string`	—
`ref`	Imperative controls for opening and closing the drawer.	`Ref<ToggleDrawerRef>`	—
`shouldCloseOnEsc`	Allows Escape to request closing.	`boolean`	`true`
`shouldCloseOnOverlayClick`	Allows an overlay click to request closing.	`boolean`	`true`
`width`	Drawer width for left or right placement.	`number`	`280`
`...nativeDivProps`	Native props forwarded to the drawer content element.	`NativeDrawerDivProps`	—

isOpen is intentionally not part of ToggleDrawer's API because the component manages that state internally.

Types

type DrawerPlacement = 'top' | 'right' | 'bottom' | 'left';
type DrawerOpenChangeHandler = (open: boolean) => void;
 
type ToggleDrawerRef = {
  handleCloseDrawer: () => void;
  handleOpenDrawer: () => void;
};
 
type NativeDrawerDivProps = Omit<ComponentProps<'div'>, 'title'>;