Component documentation
SGUI / Development
Connect SGUI navigation to host-owned route state without a framework dependency.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
Path: /courses — Ready
This adapter changes local route state only. Real host routers own history, URL updates and persistence.
Path: /courses — Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SGNavigationProvider, SGLink } from '@structured-growth/sg-ui';
import { AppPageTabs } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function navigationAdapterExample() {
const [pathname,setPathname]=useState("/courses");
const [status,setStatus]=useState("Ready");
const adapter={pathname,navigate:(href:string,options?:{replace?:boolean})=>{setPathname(href);setStatus((options?.replace?'Replaced':'Pushed')+' '+href);}};
return (
<>
<ThemeScope density="comfortable"><SGNavigationProvider value={adapter}><Stack gap={3}><SGLink href="/courses/intro" replace={false}>{"Open course"}</SGLink><AppPageTabs label="Host routes" value={pathname} items={[{id:'/courses',label:'Courses',href:'/courses'},{id:'/courses/intro',label:'Introduction',href:'/courses/intro'}]}/><Typography role="status">Path: {pathname} — {status}</Typography></Stack></SGNavigationProvider></ThemeScope>
</>
);
}
This adapter changes local route state only. Real host routers own history, URL updates and persistence.
Path: /courses — Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SGNavigationProvider, SGLink } from '@structured-growth/sg-ui';
import { AppPageTabs } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function navigationAdapterExample() {
const [pathname,setPathname]=useState("/courses");
const [status,setStatus]=useState("Ready");
const adapter={pathname,navigate:(href:string,options?:{replace?:boolean})=>{setPathname(href);setStatus((options?.replace?'Replaced':'Pushed')+' '+href);}};
return (
<>
<ThemeScope density="compact"><SGNavigationProvider value={adapter}><Stack gap={3}><SGLink href="/courses/intro" replace={false}>{"Open course"}</SGLink><AppPageTabs label="Host routes" value={pathname} items={[{id:'/courses',label:'Courses',href:'/courses'},{id:'/courses/intro',label:'Introduction',href:'/courses/intro'}]}/><Typography role="status">Path: {pathname} — {status}</Typography></Stack></SGNavigationProvider></ThemeScope>
</>
);
}
This adapter changes local route state only. Real host routers own history, URL updates and persistence.
Path: /courses — Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SGNavigationProvider, SGLink } from '@structured-growth/sg-ui';
import { AppPageTabs } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function navigationAdapterExample() {
const [pathname,setPathname]=useState("/courses");
const [status,setStatus]=useState("Ready");
const adapter={pathname,navigate:(href:string,options?:{replace?:boolean})=>{setPathname(href);setStatus((options?.replace?'Replaced':'Pushed')+' '+href);}};
return (
<>
<ThemeScope density="comfortable"><SGNavigationProvider value={adapter}><Stack gap={3}><SGLink href="/courses/intro" replace={true}>{"A host-defined destination with a longer descriptive label"}</SGLink><AppPageTabs label="Host routes" value={pathname} items={[{id:'/courses',label:'Courses',href:'/courses'},{id:'/courses/intro',label:'Introduction',href:'/courses/intro'}]}/><Typography role="status">Path: {pathname} — {status}</Typography></Stack></SGNavigationProvider></ThemeScope>
</>
);
}