SGUI / Development
Hierarchical menu
Sliding drilldown and Back navigation with native links or command menu semantics.
Loading examples…
Loading examples…
Examples
Loading examples…
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
Sliding drilldown and Back navigation with native links or command menu semantics.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
import { useState } from 'react';
import { HierarchicalMenu, type HierarchicalMenuLevel } from '@structured-growth/sg-ui/experimental';
const items: HierarchicalMenuLevel = {
"title": "Course workspace",
"sections": [
{
"id": "workspace",
"label": "Workspace",
"items": [
{
"id": "settings",
"label": "Course settings",
"children": {
"title": "Course settings",
"sections": [
{
"id": "settings",
"items": [
{
"id": "people",
"label": "People",
"children": {
"title": "People",
"sections": [
{
"id": "people",
"items": [
{
"id": "invite",
"label": "Invite learner"
},
{
"id": "roster",
"label": "Open roster",
"href": "#roster"
}
]
}
]
}
},
{
"id": "unavailable",
"label": "Unavailable",
"disabled": true
}
]
}
]
},
"disabled": false
},
{
"id": "resources",
"label": "Resources",
"childBehavior": "inline",
"children": {
"sections": [
{
"id": "resources",
"items": [
{
"id": "reports",
"label": "Reports",
"children": {
"title": "Reports",
"sections": [
{
"id": "reports",
"items": [
{
"id": "export",
"label": "Export report"
}
]
}
]
}
}
]
}
]
}
},
{
"id": "overview",
"label": "Overview",
"href": "#overview",
"current": true
}
]
}
],
"footerItems": [
{
"id": "help",
"label": "Help",
"href": "https://example.org",
"target": "_blank"
}
]
};
export function CourseMenu() {
const [path, setPath] = useState<string[]>([]);
return <HierarchicalMenu label={"Course navigation"} items={items} presentation="navigation" density="comfortable" path={path} onPathChange={setPath} style={{"width":"18rem","height":"20rem","maxWidth":"100%"}} />;
}Open Course settings, then People. Resources expands inline and contains its own Reports drilldown. The host owns real destinations.
import { HierarchicalMenu, type HierarchicalMenuLevel } from '@structured-growth/sg-ui/experimental';
const items: HierarchicalMenuLevel = {
"title": "Course workspace",
"sections": [
{
"id": "workspace",
"label": "Workspace",
"items": [
{
"id": "settings",
"label": "Course settings",
"children": {
"title": "Course settings",
"sections": [
{
"id": "settings",
"items": [
{
"id": "people",
"label": "People",
"children": {
"title": "People",
"sections": [
{
"id": "people",
"items": [
{
"id": "invite",
"label": "Invite learner"
},
{
"id": "roster",
"label": "Open roster",
"href": "#roster"
}
]
}
]
}
},
{
"id": "unavailable",
"label": "Unavailable",
"disabled": true
}
]
}
]
}
},
{
"id": "resources",
"label": "Resources",
"childBehavior": "inline",
"children": {
"sections": [
{
"id": "resources",
"items": [
{
"id": "reports",
"label": "Reports",
"children": {
"title": "Reports",
"sections": [
{
"id": "reports",
"items": [
{
"id": "export",
"label": "Export report"
}
]
}
]
}
}
]
}
]
}
},
{
"id": "overview",
"label": "Overview",
"href": "#overview",
"current": true
}
]
}
],
"footerItems": [
{
"id": "help",
"label": "Help",
"href": "https://example.org",
"target": "_blank"
}
]
};
export function WorkspaceNavigation() {
return <HierarchicalMenu label="Workspace navigation" items={items} density="compact" style={{"width":"18rem","height":"20rem","maxWidth":"100%"}} />;
}Open Course settings, then People. Resources expands inline and contains its own Reports drilldown. The host owns real destinations.
import { HierarchicalMenu, type HierarchicalMenuLevel } from '@structured-growth/sg-ui/experimental';
const items: HierarchicalMenuLevel = {
"title": "Course workspace",
"sections": [
{
"id": "workspace",
"label": "Workspace",
"items": [
{
"id": "settings",
"label": "Course settings",
"children": {
"title": "Course settings",
"sections": [
{
"id": "settings",
"items": [
{
"id": "people",
"label": "People",
"children": {
"title": "People",
"sections": [
{
"id": "people",
"items": [
{
"id": "invite",
"label": "Invite learner"
},
{
"id": "roster",
"label": "Open roster",
"href": "#roster"
}
]
}
]
}
},
{
"id": "unavailable",
"label": "Unavailable",
"disabled": true
}
]
}
]
}
},
{
"id": "resources",
"label": "Resources",
"childBehavior": "inline",
"children": {
"sections": [
{
"id": "resources",
"items": [
{
"id": "reports",
"label": "Reports",
"children": {
"title": "Reports",
"sections": [
{
"id": "reports",
"items": [
{
"id": "export",
"label": "Export report"
}
]
}
]
}
}
]
}
]
}
},
{
"id": "overview",
"label": "Overview",
"href": "#overview",
"current": true
}
]
}
],
"footerItems": [
{
"id": "help",
"label": "Help",
"href": "https://example.org",
"target": "_blank"
}
]
};
export function WorkspaceNavigation() {
return <HierarchicalMenu label="Workspace navigation" items={items} density="comfortable" style={{"width":"18rem","height":"20rem","maxWidth":"100%"}} />;
}Requests are rejected until the host accepts them. No navigation or persistence is performed by opening a branch.
import { useState } from 'react';
import { HierarchicalMenu, type HierarchicalMenuLevel } from '@structured-growth/sg-ui/experimental';
import { Checkbox, Stack } from '@structured-growth/sg-ui/experimental';
const items: HierarchicalMenuLevel = {
"title": "Course workspace",
"sections": [
{
"id": "workspace",
"label": "Workspace",
"items": [
{
"id": "settings",
"label": "Course settings",
"children": {
"title": "Course settings",
"sections": [
{
"id": "settings",
"items": [
{
"id": "people",
"label": "People",
"children": {
"title": "People",
"sections": [
{
"id": "people",
"items": [
{
"id": "invite",
"label": "Invite learner"
},
{
"id": "roster",
"label": "Open roster",
"href": "#roster"
}
]
}
]
}
},
{
"id": "unavailable",
"label": "Unavailable",
"disabled": true
}
]
}
]
}
},
{
"id": "resources",
"label": "Resources",
"childBehavior": "inline",
"children": {
"sections": [
{
"id": "resources",
"items": [
{
"id": "reports",
"label": "Reports",
"children": {
"title": "Reports",
"sections": [
{
"id": "reports",
"items": [
{
"id": "export",
"label": "Export report"
}
]
}
]
}
}
]
}
]
}
},
{
"id": "overview",
"label": "Overview",
"href": "#overview",
"current": true
}
]
}
],
"footerItems": [
{
"id": "help",
"label": "Help",
"href": "https://example.org",
"target": "_blank"
}
]
};
export function ControlledMenu() {
const [path, setPath] = useState<string[]>([]);
const [accept, setAccept] = useState(false);
return <Stack gap={3}>
<Checkbox label="Accept path changes" checked={accept} onCheckedChange={setAccept} />
<HierarchicalMenu label="Controlled workspace" items={items} path={path} onPathChange={next => { if (accept) setPath(next); }} style={{"width":"18rem","height":"20rem","maxWidth":"100%"}} />
</Stack>;
}Escape returns one child level, then closes the root popup. Reopening mounts a fresh local path. Leaf action completion is local.
import { useState } from 'react';
import { HierarchicalMenu, type HierarchicalMenuLevel } from '@structured-growth/sg-ui/experimental';
import { Button, Popover, Stack } from '@structured-growth/sg-ui/experimental';
const items: HierarchicalMenuLevel = {
"title": "Course workspace",
"sections": [
{
"id": "workspace",
"label": "Workspace",
"items": [
{
"id": "settings",
"label": "Course settings",
"children": {
"title": "Course settings",
"sections": [
{
"id": "settings",
"items": [
{
"id": "people",
"label": "People",
"children": {
"title": "People",
"sections": [
{
"id": "people",
"items": [
{
"id": "invite",
"label": "Invite learner"
},
{
"id": "roster",
"label": "Open roster",
"href": "#roster"
}
]
}
]
}
},
{
"id": "unavailable",
"label": "Unavailable",
"disabled": true
}
]
}
]
}
},
{
"id": "resources",
"label": "Resources",
"childBehavior": "inline",
"children": {
"sections": [
{
"id": "resources",
"items": [
{
"id": "reports",
"label": "Reports",
"children": {
"title": "Reports",
"sections": [
{
"id": "reports",
"items": [
{
"id": "export",
"label": "Export report"
}
]
}
]
}
}
]
}
]
}
},
{
"id": "overview",
"label": "Overview",
"href": "#overview",
"current": true
}
]
}
],
"footerItems": [
{
"id": "help",
"label": "Help",
"href": "https://example.org",
"target": "_blank"
}
]
};
export function CourseCommands() {
const [open, setOpen] = useState(false);
const [complete, setComplete] = useState(false);
return <Stack gap={3}>
<Popover title="Course command popup" size="content" open={open} onOpenChange={setOpen} trigger={<Button>Open course commands</Button>}>
<HierarchicalMenu label="Course commands" presentation="commands" items={items} onDismiss={() => setOpen(false)} onAction={() => { setComplete(true); setOpen(false); }} style={{"width":"18rem","height":"20rem","maxWidth":"100%"}} />
</Popover>
{complete && <output role="status">Local command completed. The host owns persistence.</output>}
</Stack>;
}