SGUI / Development
AppPageHeader
Hierarchy, breadcrumbs, metadata and host-owned actions.
Loading examples…
Loading examples…
Examples
Loading examples…
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
Hierarchy, breadcrumbs, metadata and host-owned actions.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
Publish a course with clear goals.
Ready
Hierarchy, breadcrumbs, metadata and host-owned actions.
Publish a course with clear goals.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppPageHeader } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function AppPageHeaderExample() {
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><AppPageHeader title={"Building a thoughtful learning experience"} headingLevel={2} hierarchy={"primary"} description="Publish a course with clear goals." breadcrumbs={[{label:'Workspace'},{label:'Courses'},{label:"Course introduction"}]} metaItems={[{label:'Draft'},{label:'3 sections'}]} moreMenuItems={[{label:'Duplicate',onClick:()=>setStatus('Duplicate requested')},{label:'Archive',danger:true,onClick:()=>setStatus('Archive requested'),disabled:false}]} /><Typography role="status">{status}</Typography></Stack>
</ThemeScope>
</>
);
}
Hierarchy, breadcrumbs, metadata and host-owned actions.
Publish a course with clear goals.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppPageHeader } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function AppPageHeaderExample() {
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="compact">
<Stack gap={3}><AppPageHeader title={"Building a thoughtful learning experience"} headingLevel={2} hierarchy={"primary"} description="Publish a course with clear goals." breadcrumbs={[{label:'Workspace'},{label:'Courses'},{label:"Course introduction"}]} metaItems={[{label:'Draft'},{label:'3 sections'}]} moreMenuItems={[{label:'Duplicate',onClick:()=>setStatus('Duplicate requested')},{label:'Archive',danger:true,onClick:()=>setStatus('Archive requested'),disabled:false}]} /><Typography role="status">{status}</Typography></Stack>
</ThemeScope>
</>
);
}
Hierarchy, breadcrumbs, metadata and host-owned actions.
Publish a course with clear goals.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppPageHeader } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function AppPageHeaderExample() {
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><AppPageHeader title={"Building a thoughtful learning experience"} headingLevel={2} hierarchy={"primary"} description="Publish a course with clear goals." breadcrumbs={[{label:'Workspace'},{label:'Courses'},{label:"Course introduction"}]} metaItems={[{label:'Draft'},{label:'3 sections'}]} moreMenuItems={[{label:'Duplicate',onClick:()=>setStatus('Duplicate requested')},{label:'Archive',danger:true,onClick:()=>setStatus('Archive requested'),disabled:false}]} /><Typography role="status">{status}</Typography></Stack>
</ThemeScope>
</>
);
}
Hierarchy, breadcrumbs, metadata and host-owned actions.
Publish a course with clear goals.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppPageHeader } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function AppPageHeaderExample() {
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="compact">
<Stack gap={3}><AppPageHeader title={"Building a thoughtful learning experience"} headingLevel={2} hierarchy={"subpage"} description="Publish a course with clear goals." breadcrumbs={[{label:'Workspace'},{label:'Courses'},{label:"Course introduction"}]} metaItems={[{label:'Draft'},{label:'3 sections'}]} moreMenuItems={[{label:'Duplicate',onClick:()=>setStatus('Duplicate requested')},{label:'Archive',danger:true,onClick:()=>setStatus('Archive requested'),disabled:false}]} /><Typography role="status">{status}</Typography></Stack>
</ThemeScope>
</>
);
}
Hierarchy, breadcrumbs, metadata and host-owned actions.
Publish a course with clear goals.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppPageHeader } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function AppPageHeaderExample() {
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><AppPageHeader title={"Building a thoughtful learning experience"} headingLevel={2} hierarchy={"subpage"} description="Publish a course with clear goals." breadcrumbs={[{label:'Workspace'},{label:'Courses'},{label:"Course introduction"}]} metaItems={[{label:'Draft'},{label:'3 sections'}]} moreMenuItems={[{label:'Duplicate',onClick:()=>setStatus('Duplicate requested')},{label:'Archive',danger:true,onClick:()=>setStatus('Archive requested'),disabled:false}]} /><Typography role="status">{status}</Typography></Stack>
</ThemeScope>
</>
);
}
The neutral split action occupies the public actionButtons slot. A five-level hierarchy condenses middle ancestors into Show path while preserving the current page; long labels wrap in narrow hosts. The host owns navigation, publication and approvals.
A deep course hierarchy with a host-owned primary action.
'use client';
import { useState } from 'react';
import {AppPageHeader} from '@structured-growth/sg-ui/components';
import {SplitAction} from '@structured-growth/sg-ui/experimental';
import {Stack,Typography} from '@structured-growth/sg-ui/primitives';
export default function CourseHeaderActionsExample() {
const [result,setResult]=useState("");
return (
<>
<Stack gap={3}>
<AppPageHeader title="Teaching with clear goals and meaningful assessment" headingLevel={2} hierarchy="primary" breadcrumbs={[{"label":"Workspace","href":"#workspace"},{"label":"Professional development","href":"#development"},{"label":"Instructor learning paths","href":"#paths"},{"label":"Long course collection for teaching and assessment","href":"#collection"},{"label":"Course details"}]} description="A deep course hierarchy with a host-owned primary action." actionButtons={<SplitAction label="Publish course" items={[{id:"preview",label:"Preview course"},{id:"schedule",label:"Schedule publication"}]} onPress={()=>setResult("Publication requested. Host owns approval and persistence.")} onAction={id=>setResult(id==="preview"?"Preview requested.":"Publication scheduling requested.")} />} />
<Typography role="status">{result}</Typography>
</Stack>
</>
);
}