Sidebar Navigation
The sidebar is the primary navigation component in App Studio applications. It shows navigation items, groups, and the app branding — all configured in the app settings.
Sidebar Configuration
Configure the sidebar in the Properties Editor with the App root selected → Navigation tab:
// Sidebar config
{
"navigation": {
"type": "sidebar",
"position": "left", // "left" | "right"
"width": 240, // sidebar width in pixels (default 240)
"collapsible": true, // allow users to collapse to icon-only mode
"logo": {
"text": "CRM Portal", // app name shown at top of sidebar
"icon": "building", // Font Awesome icon name
"imageUrl": null // optional: replace text+icon with an image
},
"footer": { // optional footer at bottom of sidebar
"showUserProfile": true,
"showHelpLink": true,
"helpUrl": "https://docs.myorg.com/crm"
}
}
}
Sidebar Anatomy
| Zone | Content | Configurable? |
|---|---|---|
| Logo / Brand | App name, icon, or logo image | Yes — logo.text, logo.icon, logo.imageUrl |
| Navigation Items | Menu items and groups (see Menu Items and Menu Groups pages) | Yes — items[] |
| Footer | User profile button, logout, help link | Yes — footer config |
Sidebar vs. Top Navigation
For apps where vertical space is more valuable than horizontal (e.g., dashboards, read-heavy apps), switch to a top navigation bar:
// Top navigation config
{
"navigation": {
"type": "topnav",
"logo": { "text": "Analytics", "icon": "chart-line" },
"items": [ ... ] // same items config — rendered horizontally
}
}
Collapsible Sidebar
When collapsible: true, the sidebar shows a collapse button. In collapsed mode, only icons are shown (no labels). Item tooltips appear on hover to identify items. The user's collapse preference is saved in browser local storage — persists across sessions.
Sidebar Visibility per Breakpoint
By default, the sidebar is hidden on Mobile (replaced by a hamburger menu button that shows a drawer overlay). This behavior is built into the sidebar component and does not require separate widget configuration.