vwf .

API Reference

Complete API documentation for components, utilities, and framework core

Reference/API/NavigationDrawer

NavigationDrawer

Slide-out navigation drawer with user profile, quick actions, statistics, and trending content

🔧 Props

PropertyTypeDefaultDescription
isOpen*State<boolean>-VanJS state controlling drawer visibility

✨ Features

Two-part return pattern: [overlay, drawer]

Slide animation from left (GPU-accelerated transforms)

Overlay backdrop with click-to-close

Z-index hierarchy (overlay z-[998], drawer z-[999])

Mobile-optimized 280px width

User profile display with gradient background

Navigation integration (auto-close on navigate)

Community features (stats, trending, active neighbors)

Logout flow (API call + auth store + hard redirect)

Grid layouts (3-col nav, 3-col actions, 4-col stats)

Vertical scroll for overflow content

💻 Examples

Basic Drawer

const isDrawerOpen = van.state(true);

const [overlay, drawer] = NavigationDrawer({ isOpen: isDrawerOpen });

return div(
  overlay,  // Backdrop
  drawer,   // Drawer panel
  Button({
    onclick: () => isDrawerOpen.val = !isDrawerOpen.val
  }, () => isDrawerOpen.val ? 'Close Drawer' : 'Open Drawer')
);

▶️ Live Preview

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

With Toggle Button

const isDrawerOpen = van.state(false);
const [overlay, drawer] = NavigationDrawer({ isOpen: isDrawerOpen });

return div(
  overlay,
  drawer,
  Button({
    onclick: () => isDrawerOpen.val = true
  }, 'Open 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