API Reference
Complete API documentation for components, utilities, and framework core
NavigationHeader
Primary app navigation header with logo, mobile/desktop navigation, and hamburger/back button
🔧 Props
| Property | Type | Default | Description |
|---|---|---|---|
| navLinks | Array | defaultNavLinks | 5 primary nav links (feed, discover, services, messages, bookings) |
| dsktpNavLinks | Array | defaultDsktpNavLinks | 3 desktop-only nav links (stats, neighbors, trending) |
| defaultTab | string | navLinks[0].id | Default active tab identifier |
| class | string | - | Additional CSS classes |
| ...htmlProps | object | {} | Standard HTML attributes |
✨ Features
Two-part return pattern: [NavigationDrawer, header]
Context-aware hamburger/back button (3 states)
Fixed bottom mobile navigation bar
Desktop horizontal navigation with hover effects
Logo integration with click-to-navigate-home
Active tab highlighting with sunrise underline
Responsive design (mobile/desktop layouts)
NavigationDrawer integration (auto-close on navigate)
💻 Examples
Basic Navigation
const [NavigationDrawer, header] = NavigationHeader();
return div(
NavigationDrawer,
header,
// Page content
);▶️ Live Preview
💡 Click "Edit Code" to modify the example
🔄 Click "Apply Changes" to see your modifications
↩️ Click "Reset" to restore original code
Custom Links
const customLinks = [
{ id: 'home', label: 'Home', icon: 'oj-ux-ico-home', path: '/' },
{ id: 'about', label: 'About', icon: 'oj-ux-ico-information-s', path: '/about' }
];
const [NavigationDrawer, header] = NavigationHeader({
navLinks: customLinks,
defaultTab: 'home'
});
return div(NavigationDrawer, header);▶️ 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