API Reference

Complete API documentation for components, utilities, and framework core

Components

Form Components

Display Components

Navigation Components

Layout Components

Utility Components

Reference/API/NavDrawer

NavDrawer

Slide-in navigation drawer with sections, header, and footer. Four components in one file.

🔧 Props

Property	Type	Default	Description
isOpen*	State<boolean>	-	Controls drawer open/close state
position	string	'left'	Drawer position: 'left' or 'right'
width	string	'280px'	Drawer width (CSS value)
onClose	function	undefined	Callback when drawer closes
showOverlay	boolean	true	Show backdrop overlay
closeOnOverlay	boolean	true	Close when clicking overlay
closeOnEscape	boolean	true	Close on ESC key press
class	string	''	Additional drawer classes
overlayClass	string	''	Additional overlay classes
...htmlProps	object	{}	Standard HTML attributes

✨ Features

Four composable components (NavDrawer, NavDrawerSection, NavDrawerHeader, NavDrawerFooter)

Slide animation from left or right

Overlay backdrop with customizable opacity

Keyboard support (ESC to close)

Click-outside-to-close functionality

Flexible item structure: { key, label, icon?, description?, badge? }

Selected item highlighting

Responsive width configuration

Smooth transitions with GPU acceleration

💻 Examples

Basic Drawer

javascript•Basic Drawer

const isOpen = van.state(true);

const [overlay, drawer] = NavDrawer({ isOpen },
  NavDrawerHeader(
    { class: 'p-4 bg-gradient-to-br from-sky to-earth' },
    h3({ class: 'text-white font-semibold' }, 'Menu')
  ),
  NavDrawerSection({
    title: 'Navigation',
    items: [
      { key: 'home', label: 'Home', icon: 'oj-ux-ico-home' },
      { key: 'profile', label: 'Profile', icon: 'oj-ux-ico-user' }
    ],
    onSelect: (item) => console.log('Selected:', item.key)
  }),
  NavDrawerFooter(
    { class: 'p-4' },
    Button({ class: 'w-full' }, 'Logout')
  )
);

return div(overlay, drawer);

▶️ Live Preview

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

Right-Side Drawer

javascript•Right-Side Drawer

const settingsOpen = van.state(true);
const currentSetting = van.state('general');
const settingsItems = [
  { key: 'general', label: 'General', icon: 'oj-ux-ico-settings' },
  { key: 'privacy', label: 'Privacy', icon: 'oj-ux-ico-lock' }
];

const [overlay, drawer] = NavDrawer({
  isOpen: settingsOpen,
  position: 'right',
  width: '320px',
  onClose: () => settingsOpen.val = false
},
  NavDrawerSection({
    title: 'Settings',
    items: settingsItems,
    selectedItem: currentSetting
  })
);

return div(overlay, drawer);

▶️ Live Preview

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

💡 Usage Tips

🔗 Related

Explore vwf

Discover what vwf can do