SGUI / Development
SGLink
Native anchor semantics with an optional host router, including replace and download behavior.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
No fixed SGUI child components.
Component documentation
SGUI / Development
Native anchor semantics with an optional host router, including replace and download behavior.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
This adapter changes local route state only. Real host routers own history, URL updates and persistence.
'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 linkAdapterExample() {
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><SGLink href="data:text/plain,Example%20download" download="example.txt">Native download (router bypass)</SGLink><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.
'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 linkAdapterExample() {
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><SGLink href="data:text/plain,Example%20download" download="example.txt">Native download (router bypass)</SGLink><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.
'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 linkAdapterExample() {
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><SGLink href="data:text/plain,Example%20download" download="example.txt">Native download (router bypass)</SGLink><Typography role="status">Path: {pathname} — {status}</Typography></Stack></SGNavigationProvider></ThemeScope>
</>
);
}