App Studio
Menu Groups
Menu groups organize navigation items under collapsible labeled sections — ideal for apps with many pages or clear functional domains.
Group Config
// NavGroup configuration
{
"type": "group",
"label": "Sales", // Group header label
"icon": "briefcase", // Optional icon next to the group header
"collapsible": true, // Allow users to collapse the group
"defaultCollapsed": false, // Start collapsed or expanded
"visibilityExpression": "{{ context.roles.includes('sales') || context.roles.includes('admin') }}",
"items": [
{
"type": "item",
"label": "Leads",
"icon": "users",
"targetPageId": "leads-list"
},
{
"type": "item",
"label": "Opportunities",
"icon": "handshake",
"targetPageId": "opportunities"
},
{
"type": "item",
"label": "Contacts",
"icon": "address-book",
"targetPageId": "contacts"
}
]
}
Full Navigation Structure Example
// Complete navigation items config for a CRM app
"items": [
{ "type": "item", "label": "Dashboard", "icon": "gauge", "targetPageId": "dashboard" },
{ "type": "divider" },
{
"type": "group",
"label": "Sales",
"icon": "briefcase",
"items": [
{ "type": "item", "label": "Leads", "icon": "users", "targetPageId": "leads-list" },
{ "type": "item", "label": "Opportunities", "icon": "handshake", "targetPageId": "opps" }
]
},
{
"type": "group",
"label": "Reports",
"icon": "chart-bar",
"defaultCollapsed": true,
"visibilityExpression": "{{ context.roles.includes('manager') }}",
"items": [
{ "type": "item", "label": "Pipeline", "icon": "filter", "targetPageId": "pipeline-report" },
{ "type": "item", "label": "Revenue", "icon": "dollar-sign", "targetPageId": "revenue-report" }
]
},
{
"type": "item",
"label": "Settings",
"icon": "gear",
"targetPageId": "settings",
"visibilityExpression": "{{ context.roles.includes('admin') }}"
}
]
Active State in Groups
When a user navigates to a page inside a group, the group auto-expands (if collapsed) and the active item is highlighted. The group header does not change its active appearance — only the item inside it.