SGUI / Development
Navigation
Route ownership remains with the host; current links expose aria-current.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
Route ownership remains with the host; current links expose aria-current.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
Route ownership remains with the host; current links expose aria-current.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Navigation, NavigationItem, List, ListItem, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function NavigationPlaygroundExample() {
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<ThemeScope density="comfortable">
<Navigation label={"Course navigation"}><Stack direction={"column"} gap={2} wrap><NavigationItem href="#overview" current={("overview" as string) === "overview"}>{"Overview"}</NavigationItem><NavigationItem href="#lessons" current={("overview" as string) === "lessons"}>Lessons</NavigationItem></Stack></Navigation>
</ThemeScope>
</>
);
}
Stack supplies the layout; Navigation has no orientation prop. These local links update a simulated destination without leaving the example. A production host supplies its routing adapter.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Navigation, NavigationItem, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function NavigationMatrixExample() {
const [current, setCurrent] = useState("overview");
return (
<>
<ThemeScope density={"compact"} dir={"ltr"}>
<Stack gap={3}>
<Navigation label={"Horizontal navigation · compact · LTR"}>
<Stack direction={"row"} gap={2} wrap>
<NavigationItem href="#overview" current={current === "overview"} onClick={event => {event.preventDefault();setCurrent("overview");}}>Overview</NavigationItem>
<NavigationItem href="#lessons" current={current === "lessons"} onClick={event => {event.preventDefault();setCurrent("lessons");}}>Lessons and activities</NavigationItem>
<NavigationItem href="#resources" current={current === "resources"} onClick={event => {event.preventDefault();setCurrent("resources");}}>Resources</NavigationItem>
</Stack>
</Navigation>
</Stack>
</ThemeScope>
</>
);
}
Stack supplies the layout; Navigation has no orientation prop. These local links update a simulated destination without leaving the example. A production host supplies its routing adapter.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Navigation, NavigationItem, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function NavigationMatrixExample() {
const [current, setCurrent] = useState("overview");
return (
<>
<ThemeScope density={"compact"} dir={"rtl"}>
<Stack gap={3}>
<Navigation label={"Horizontal navigation · compact · RTL"}>
<Stack direction={"row"} gap={2} wrap>
<NavigationItem href="#overview" current={current === "overview"} onClick={event => {event.preventDefault();setCurrent("overview");}}>Overview</NavigationItem>
<NavigationItem href="#lessons" current={current === "lessons"} onClick={event => {event.preventDefault();setCurrent("lessons");}}>Lessons and activities</NavigationItem>
<NavigationItem href="#resources" current={current === "resources"} onClick={event => {event.preventDefault();setCurrent("resources");}}>Resources</NavigationItem>
</Stack>
</Navigation>
</Stack>
</ThemeScope>
</>
);
}
Stack supplies the layout; Navigation has no orientation prop. These local links update a simulated destination without leaving the example. A production host supplies its routing adapter.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Navigation, NavigationItem, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function NavigationMatrixExample() {
const [current, setCurrent] = useState("overview");
return (
<>
<ThemeScope density={"comfortable"} dir={"ltr"}>
<Stack gap={3}>
<Navigation label={"Horizontal navigation · comfortable · LTR"}>
<Stack direction={"row"} gap={2} wrap>
<NavigationItem href="#overview" current={current === "overview"} onClick={event => {event.preventDefault();setCurrent("overview");}}>Overview</NavigationItem>
<NavigationItem href="#lessons" current={current === "lessons"} onClick={event => {event.preventDefault();setCurrent("lessons");}}>Lessons and activities</NavigationItem>
<NavigationItem href="#resources" current={current === "resources"} onClick={event => {event.preventDefault();setCurrent("resources");}}>Resources</NavigationItem>
</Stack>
</Navigation>
</Stack>
</ThemeScope>
</>
);
}
Stack supplies the layout; Navigation has no orientation prop. These local links update a simulated destination without leaving the example. A production host supplies its routing adapter.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Navigation, NavigationItem, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function NavigationMatrixExample() {
const [current, setCurrent] = useState("overview");
return (
<>
<ThemeScope density={"comfortable"} dir={"rtl"}>
<Stack gap={3}>
<Navigation label={"Horizontal navigation · comfortable · RTL"}>
<Stack direction={"row"} gap={2} wrap>
<NavigationItem href="#overview" current={current === "overview"} onClick={event => {event.preventDefault();setCurrent("overview");}}>Overview</NavigationItem>
<NavigationItem href="#lessons" current={current === "lessons"} onClick={event => {event.preventDefault();setCurrent("lessons");}}>Lessons and activities</NavigationItem>
<NavigationItem href="#resources" current={current === "resources"} onClick={event => {event.preventDefault();setCurrent("resources");}}>Resources</NavigationItem>
</Stack>
</Navigation>
</Stack>
</ThemeScope>
</>
);
}
Stack supplies the layout; Navigation has no orientation prop. These local links update a simulated destination without leaving the example. A production host supplies its routing adapter.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Navigation, NavigationItem, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function NavigationMatrixExample() {
const [current, setCurrent] = useState("overview");
return (
<>
<ThemeScope density={"compact"} dir={"ltr"}>
<Stack gap={3}>
<Navigation label={"Vertical navigation · compact · LTR"}>
<Stack direction={"column"} gap={2} wrap>
<NavigationItem href="#overview" current={current === "overview"} onClick={event => {event.preventDefault();setCurrent("overview");}}>Overview</NavigationItem>
<NavigationItem href="#lessons" current={current === "lessons"} onClick={event => {event.preventDefault();setCurrent("lessons");}}>Lessons and activities</NavigationItem>
<NavigationItem href="#resources" current={current === "resources"} onClick={event => {event.preventDefault();setCurrent("resources");}}>Resources</NavigationItem>
</Stack>
</Navigation>
</Stack>
</ThemeScope>
</>
);
}
Stack supplies the layout; Navigation has no orientation prop. These local links update a simulated destination without leaving the example. A production host supplies its routing adapter.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Navigation, NavigationItem, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function NavigationMatrixExample() {
const [current, setCurrent] = useState("overview");
return (
<>
<ThemeScope density={"compact"} dir={"rtl"}>
<Stack gap={3}>
<Navigation label={"Vertical navigation · compact · RTL"}>
<Stack direction={"column"} gap={2} wrap>
<NavigationItem href="#overview" current={current === "overview"} onClick={event => {event.preventDefault();setCurrent("overview");}}>Overview</NavigationItem>
<NavigationItem href="#lessons" current={current === "lessons"} onClick={event => {event.preventDefault();setCurrent("lessons");}}>Lessons and activities</NavigationItem>
<NavigationItem href="#resources" current={current === "resources"} onClick={event => {event.preventDefault();setCurrent("resources");}}>Resources</NavigationItem>
</Stack>
</Navigation>
</Stack>
</ThemeScope>
</>
);
}
Stack supplies the layout; Navigation has no orientation prop. These local links update a simulated destination without leaving the example. A production host supplies its routing adapter.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Navigation, NavigationItem, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function NavigationMatrixExample() {
const [current, setCurrent] = useState("overview");
return (
<>
<ThemeScope density={"comfortable"} dir={"ltr"}>
<Stack gap={3}>
<Navigation label={"Vertical navigation · comfortable · LTR"}>
<Stack direction={"column"} gap={2} wrap>
<NavigationItem href="#overview" current={current === "overview"} onClick={event => {event.preventDefault();setCurrent("overview");}}>Overview</NavigationItem>
<NavigationItem href="#lessons" current={current === "lessons"} onClick={event => {event.preventDefault();setCurrent("lessons");}}>Lessons and activities</NavigationItem>
<NavigationItem href="#resources" current={current === "resources"} onClick={event => {event.preventDefault();setCurrent("resources");}}>Resources</NavigationItem>
</Stack>
</Navigation>
</Stack>
</ThemeScope>
</>
);
}
Stack supplies the layout; Navigation has no orientation prop. These local links update a simulated destination without leaving the example. A production host supplies its routing adapter.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Navigation, NavigationItem, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function NavigationMatrixExample() {
const [current, setCurrent] = useState("overview");
return (
<>
<ThemeScope density={"comfortable"} dir={"rtl"}>
<Stack gap={3}>
<Navigation label={"Vertical navigation · comfortable · RTL"}>
<Stack direction={"column"} gap={2} wrap>
<NavigationItem href="#overview" current={current === "overview"} onClick={event => {event.preventDefault();setCurrent("overview");}}>Overview</NavigationItem>
<NavigationItem href="#lessons" current={current === "lessons"} onClick={event => {event.preventDefault();setCurrent("lessons");}}>Lessons and activities</NavigationItem>
<NavigationItem href="#resources" current={current === "resources"} onClick={event => {event.preventDefault();setCurrent("resources");}}>Resources</NavigationItem>
</Stack>
</Navigation>
</Stack>
</ThemeScope>
</>
);
}