Overlays
Drawer
Side sheet for settings and secondary tasks. Slides in from the left or right.
- Element
<aside>- Module
@basenative/components- Function
renderDrawer
Quick start
Import the render function and call it from your server template.
import { renderDrawer } from '@basenative/components';
renderDrawer({ title: 'Settings', content: '...', position: 'right' });
Examples
Each block is a real server render — no mockups, no virtual DOM.
Right-side drawer
Slides in from the edge. Click the overlay or the close button to dismiss.
renderDrawer({ title, content, position: 'right' })Options
Arguments accepted by renderDrawer().
| Option | Type | Default | Description |
|---|---|---|---|
title |
string |
— |
Drawer title. |
content |
string |
— |
Body HTML. |
position |
'left' | 'right' |
'right' |
Edge to slide from. |
id |
string |
'drawer' |
Element id. |