Component documentation
SGUI / Development
Direct destinations, expanding groups and sliding drilldown levels in one host-supplied menu.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
One menu combining direct destinations, inline expansion, nested drilldown and footer actions. Each branch chooses its own behavior.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SideNavigation, type SideNavigationModel } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
import { SGNavigationProvider } from '@structured-growth/sg-ui/adapters';
import { DashboardIcon,MenuBookIcon,EditIcon,TuneIcon,PeopleIcon,DescriptionOutlinedIcon,TerminalIcon } from '@structured-growth/sg-ui/icons';
export default function SideNavigationExample() {
const [value,setValue] = useState("overview");
const [navigationPath,setNavigationPath] = useState("/workspace/overview");
const model:SideNavigationModel = {
"user": {
"initials": "AL",
"name": "Building a thoughtful learning experience",
"organization": "Structured Growth"
},
"rootMenu": {
"id": "mixed-workspace",
"sections": [
{
"id": "workspace",
"title": "Workspace",
"items": [
{
"id": "overview",
"icon": "dashboard",
"label": "Overview",
"href": "/workspace/overview"
},
{
"id": "course-tools",
"icon": "course",
"label": "Course tools",
"childBehavior": "expand",
"defaultExpanded": true,
"children": [
{
"id": "practice",
"icon": "edit",
"label": "Practice"
},
{
"id": "reflection",
"icon": "edit",
"label": "Reflection"
},
{
"id": "course-settings",
"icon": "settings",
"label": "Course settings",
"childBehavior": "drilldown",
"children": [
{
"id": "general",
"icon": "settings",
"label": "General settings"
},
{
"id": "notifications",
"icon": "settings",
"label": "Notifications",
"childBehavior": "expand",
"defaultExpanded": true,
"children": [
{
"id": "announcements",
"icon": "resources",
"label": "Announcements"
},
{
"id": "reminders",
"icon": "resources",
"label": "Reminders"
}
]
},
{
"id": "advanced",
"icon": "settings",
"label": "Advanced settings",
"childBehavior": "drilldown",
"children": [
{
"id": "completion",
"icon": "settings",
"label": "Completion rules"
},
{
"id": "availability",
"icon": "settings",
"label": "Availability"
}
]
}
]
}
]
},
{
"id": "organization",
"icon": "people",
"label": "Organization",
"childBehavior": "drilldown",
"children": [
{
"id": "people",
"icon": "people",
"label": "People",
"href": "/workspace/people"
},
{
"id": "teams",
"icon": "people",
"label": "Teams",
"childBehavior": "expand",
"children": [
{
"id": "instructors",
"icon": "people",
"label": "Instructors"
},
{
"id": "learners",
"icon": "people",
"label": "Learners"
}
]
}
]
}
]
}
],
"footerSections": [
{
"id": "help",
"title": "Help & support",
"items": [
{
"id": "resources",
"icon": "resources",
"label": "Resources",
"childBehavior": "expand",
"children": [
{
"id": "guide",
"icon": "resources",
"label": "Workspace guide"
},
{
"id": "shortcuts",
"icon": "terminal",
"label": "Keyboard shortcuts"
}
]
},
{
"id": "support",
"icon": "people",
"label": "Contact support"
}
]
}
]
}
};
const navigationIcons={dashboard:DashboardIcon,course:MenuBookIcon,edit:EditIcon,settings:TuneIcon,people:PeopleIcon,resources:DescriptionOutlinedIcon,terminal:TerminalIcon};
function resolveNavigationIcon(key:string) { const Icon=navigationIcons[key as keyof typeof navigationIcons];return Icon?<Icon/>:null; }
return (
<>
<ThemeScope density="comfortable">
<SGNavigationProvider value={{pathname:navigationPath,navigate:href=>setNavigationPath(href)}}><Stack gap={3}><Surface style={{height:560,width:'fit-content',maxWidth:'100%'}}><SideNavigation model={model} resolveIcon={resolveNavigationIcon} onItemSelect={setValue} aria-label="Example workspace navigation" /></Surface></Stack></SGNavigationProvider>
</ThemeScope>
</>
);
}
One menu combining direct destinations, inline expansion, nested drilldown and footer actions. Each branch chooses its own behavior.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SideNavigation, type SideNavigationModel } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
import { SGNavigationProvider } from '@structured-growth/sg-ui/adapters';
import { DashboardIcon,MenuBookIcon,EditIcon,TuneIcon,PeopleIcon,DescriptionOutlinedIcon,TerminalIcon } from '@structured-growth/sg-ui/icons';
export default function SideNavigationExample() {
const [value,setValue] = useState("overview");
const [navigationPath,setNavigationPath] = useState("/workspace/overview");
const model:SideNavigationModel = {
"user": {
"initials": "AL",
"name": "Building a thoughtful learning experience",
"organization": "Structured Growth"
},
"rootMenu": {
"id": "mixed-workspace",
"sections": [
{
"id": "workspace",
"title": "Workspace",
"items": [
{
"id": "overview",
"icon": "dashboard",
"label": "Overview",
"href": "/workspace/overview"
},
{
"id": "course-tools",
"icon": "course",
"label": "Course tools",
"childBehavior": "expand",
"defaultExpanded": true,
"children": [
{
"id": "practice",
"icon": "edit",
"label": "Practice"
},
{
"id": "reflection",
"icon": "edit",
"label": "Reflection"
},
{
"id": "course-settings",
"icon": "settings",
"label": "Course settings",
"childBehavior": "drilldown",
"children": [
{
"id": "general",
"icon": "settings",
"label": "General settings"
},
{
"id": "notifications",
"icon": "settings",
"label": "Notifications",
"childBehavior": "expand",
"defaultExpanded": true,
"children": [
{
"id": "announcements",
"icon": "resources",
"label": "Announcements"
},
{
"id": "reminders",
"icon": "resources",
"label": "Reminders"
}
]
},
{
"id": "advanced",
"icon": "settings",
"label": "Advanced settings",
"childBehavior": "drilldown",
"children": [
{
"id": "completion",
"icon": "settings",
"label": "Completion rules"
},
{
"id": "availability",
"icon": "settings",
"label": "Availability"
}
]
}
]
}
]
},
{
"id": "organization",
"icon": "people",
"label": "Organization",
"childBehavior": "drilldown",
"children": [
{
"id": "people",
"icon": "people",
"label": "People",
"href": "/workspace/people"
},
{
"id": "teams",
"icon": "people",
"label": "Teams",
"childBehavior": "expand",
"children": [
{
"id": "instructors",
"icon": "people",
"label": "Instructors"
},
{
"id": "learners",
"icon": "people",
"label": "Learners"
}
]
}
]
}
]
}
],
"footerSections": [
{
"id": "help",
"title": "Help & support",
"items": [
{
"id": "resources",
"icon": "resources",
"label": "Resources",
"childBehavior": "expand",
"children": [
{
"id": "guide",
"icon": "resources",
"label": "Workspace guide"
},
{
"id": "shortcuts",
"icon": "terminal",
"label": "Keyboard shortcuts"
}
]
},
{
"id": "support",
"icon": "people",
"label": "Contact support"
}
]
}
]
}
};
const navigationIcons={dashboard:DashboardIcon,course:MenuBookIcon,edit:EditIcon,settings:TuneIcon,people:PeopleIcon,resources:DescriptionOutlinedIcon,terminal:TerminalIcon};
function resolveNavigationIcon(key:string) { const Icon=navigationIcons[key as keyof typeof navigationIcons];return Icon?<Icon/>:null; }
return (
<>
<ThemeScope density="compact">
<SGNavigationProvider value={{pathname:navigationPath,navigate:href=>setNavigationPath(href)}}><Stack gap={3}><Surface style={{height:560,width:'fit-content',maxWidth:'100%'}}><SideNavigation model={model} resolveIcon={resolveNavigationIcon} onItemSelect={setValue} aria-label="Example workspace navigation" /></Surface></Stack></SGNavigationProvider>
</ThemeScope>
</>
);
}
One menu combining direct destinations, inline expansion, nested drilldown and footer actions. Each branch chooses its own behavior.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SideNavigation, type SideNavigationModel } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
import { SGNavigationProvider } from '@structured-growth/sg-ui/adapters';
import { DashboardIcon,MenuBookIcon,EditIcon,TuneIcon,PeopleIcon,DescriptionOutlinedIcon,TerminalIcon } from '@structured-growth/sg-ui/icons';
export default function SideNavigationExample() {
const [value,setValue] = useState("overview");
const [navigationPath,setNavigationPath] = useState("/workspace/overview");
const model:SideNavigationModel = {
"user": {
"initials": "AL",
"name": "Building a thoughtful learning experience",
"organization": "Structured Growth"
},
"rootMenu": {
"id": "mixed-workspace",
"sections": [
{
"id": "workspace",
"title": "Workspace",
"items": [
{
"id": "overview",
"icon": "dashboard",
"label": "Overview",
"href": "/workspace/overview"
},
{
"id": "course-tools",
"icon": "course",
"label": "Course tools",
"childBehavior": "expand",
"defaultExpanded": true,
"children": [
{
"id": "practice",
"icon": "edit",
"label": "Practice"
},
{
"id": "reflection",
"icon": "edit",
"label": "Reflection"
},
{
"id": "course-settings",
"icon": "settings",
"label": "Course settings",
"childBehavior": "drilldown",
"children": [
{
"id": "general",
"icon": "settings",
"label": "General settings"
},
{
"id": "notifications",
"icon": "settings",
"label": "Notifications",
"childBehavior": "expand",
"defaultExpanded": true,
"children": [
{
"id": "announcements",
"icon": "resources",
"label": "Announcements"
},
{
"id": "reminders",
"icon": "resources",
"label": "Reminders"
}
]
},
{
"id": "advanced",
"icon": "settings",
"label": "Advanced settings",
"childBehavior": "drilldown",
"children": [
{
"id": "completion",
"icon": "settings",
"label": "Completion rules"
},
{
"id": "availability",
"icon": "settings",
"label": "Availability"
}
]
}
]
}
]
},
{
"id": "organization",
"icon": "people",
"label": "Organization",
"childBehavior": "drilldown",
"children": [
{
"id": "people",
"icon": "people",
"label": "People",
"href": "/workspace/people"
},
{
"id": "teams",
"icon": "people",
"label": "Teams",
"childBehavior": "expand",
"children": [
{
"id": "instructors",
"icon": "people",
"label": "Instructors"
},
{
"id": "learners",
"icon": "people",
"label": "Learners"
}
]
}
]
}
]
}
],
"footerSections": [
{
"id": "help",
"title": "Help & support",
"items": [
{
"id": "resources",
"icon": "resources",
"label": "Resources",
"childBehavior": "expand",
"children": [
{
"id": "guide",
"icon": "resources",
"label": "Workspace guide"
},
{
"id": "shortcuts",
"icon": "terminal",
"label": "Keyboard shortcuts"
}
]
},
{
"id": "support",
"icon": "people",
"label": "Contact support"
}
]
}
]
}
};
const navigationIcons={dashboard:DashboardIcon,course:MenuBookIcon,edit:EditIcon,settings:TuneIcon,people:PeopleIcon,resources:DescriptionOutlinedIcon,terminal:TerminalIcon};
function resolveNavigationIcon(key:string) { const Icon=navigationIcons[key as keyof typeof navigationIcons];return Icon?<Icon/>:null; }
return (
<>
<ThemeScope density="comfortable">
<SGNavigationProvider value={{pathname:navigationPath,navigate:href=>setNavigationPath(href)}}><Stack gap={3}><Surface style={{height:560,width:'fit-content',maxWidth:'100%'}}><SideNavigation model={model} resolveIcon={resolveNavigationIcon} onItemSelect={setValue} aria-label="Example workspace navigation" /></Surface></Stack></SGNavigationProvider>
</ThemeScope>
</>
);
}