SGUI / Development
Tabs
Host-controlled active panel, orientation and keyboard activation.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Host-controlled active panel, orientation and keyboard activation.
Loading examples…
Loading examples…
Loading examples…
Course overview
Host-controlled active panel, orientation and keyboard activation.
Course overview
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Tabs, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function TabsPlaygroundExample() {
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">
<Tabs label={"Course workspace"} orientation={"horizontal"} activation={"automatic"} overflow={"scroll"} overflowLabel={"More tabs"} value={selected} onValueChange={setSelected} items={[{id:"overview",label:"Overview",content:<Typography>Course overview</Typography>},{id:"lessons",label:"Lessons",content:<Typography>12 lessons ready to publish</Typography>},{id:"archive",label:"Archive",disabled:true,content:<Typography>Unavailable</Typography>}]} />
</ThemeScope>
</>
);
}
Arrow-key focus and panel selection move together. The indicator slides to the selected tab; reduced motion removes sliding. The archived tab is unavailable.
Explore learning objectives and course details.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Tabs, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function TabsMatrixExample() {
const [selected, setSelected] = useState("overview");
return (
<>
<ThemeScope density={"compact"}>
<Stack gap={3}>
<Tabs label={"Horizontal tabs · compact · automatic"} orientation={"horizontal"} activation={"automatic"} value={selected} onValueChange={setSelected} items={[
{id:"overview",label:"Course overview",content:<Typography>Explore learning objectives and course details.</Typography>},
{id:"lessons",label:"Lessons and activities",content:<Typography>12 lessons are ready for review.</Typography>},
{id:"archive",label:"Archived materials",disabled:true,content:<Typography>Unavailable</Typography>}
]} />
</Stack>
</ThemeScope>
</>
);
}
Arrow-key focus and panel selection move together. The indicator slides to the selected tab; reduced motion removes sliding. The archived tab is unavailable.
Explore learning objectives and course details.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Tabs, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function TabsMatrixExample() {
const [selected, setSelected] = useState("overview");
return (
<>
<ThemeScope density={"comfortable"}>
<Stack gap={3}>
<Tabs label={"Horizontal tabs · comfortable · automatic"} orientation={"horizontal"} activation={"automatic"} value={selected} onValueChange={setSelected} items={[
{id:"overview",label:"Course overview",content:<Typography>Explore learning objectives and course details.</Typography>},
{id:"lessons",label:"Lessons and activities",content:<Typography>12 lessons are ready for review.</Typography>},
{id:"archive",label:"Archived materials",disabled:true,content:<Typography>Unavailable</Typography>}
]} />
</Stack>
</ThemeScope>
</>
);
}
Arrow-key focus and panel selection move together. The indicator slides to the selected tab; reduced motion removes sliding. The archived tab is unavailable.
Explore learning objectives and course details.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Tabs, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function TabsMatrixExample() {
const [selected, setSelected] = useState("overview");
return (
<>
<ThemeScope density={"compact"}>
<Stack gap={3}>
<Tabs label={"Vertical tabs · compact · automatic"} orientation={"vertical"} activation={"automatic"} value={selected} onValueChange={setSelected} items={[
{id:"overview",label:"Course overview",content:<Typography>Explore learning objectives and course details.</Typography>},
{id:"lessons",label:"Lessons and activities",content:<Typography>12 lessons are ready for review.</Typography>},
{id:"archive",label:"Archived materials",disabled:true,content:<Typography>Unavailable</Typography>}
]} />
</Stack>
</ThemeScope>
</>
);
}
Arrow-key focus and panel selection move together. The indicator slides to the selected tab; reduced motion removes sliding. The archived tab is unavailable.
Explore learning objectives and course details.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Tabs, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function TabsMatrixExample() {
const [selected, setSelected] = useState("overview");
return (
<>
<ThemeScope density={"comfortable"}>
<Stack gap={3}>
<Tabs label={"Vertical tabs · comfortable · automatic"} orientation={"vertical"} activation={"automatic"} value={selected} onValueChange={setSelected} items={[
{id:"overview",label:"Course overview",content:<Typography>Explore learning objectives and course details.</Typography>},
{id:"lessons",label:"Lessons and activities",content:<Typography>12 lessons are ready for review.</Typography>},
{id:"archive",label:"Archived materials",disabled:true,content:<Typography>Unavailable</Typography>}
]} />
</Stack>
</ThemeScope>
</>
);
}
Move focus with arrows, then activate the desired tab. The indicator slides on activation; focus alone does not move it. Reduced motion removes sliding.
Explore learning objectives and course details.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Tabs, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function TabsMatrixExample() {
const [selected, setSelected] = useState("overview");
return (
<>
<ThemeScope density={"comfortable"}>
<Stack gap={3}>
<Tabs label={"Horizontal tabs · comfortable · manual"} orientation={"horizontal"} activation={"manual"} value={selected} onValueChange={setSelected} items={[
{id:"overview",label:"Course overview",content:<Typography>Explore learning objectives and course details.</Typography>},
{id:"lessons",label:"Lessons and activities",content:<Typography>12 lessons are ready for review.</Typography>},
{id:"archive",label:"Archived materials",disabled:true,content:<Typography>Unavailable</Typography>}
]} />
</Stack>
</ThemeScope>
</>
);
}
Move focus with arrows, then activate the desired tab. The indicator slides on activation; focus alone does not move it. Reduced motion removes sliding.
Explore learning objectives and course details.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Tabs, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function TabsMatrixExample() {
const [selected, setSelected] = useState("overview");
return (
<>
<ThemeScope density={"comfortable"}>
<Stack gap={3}>
<Tabs label={"Vertical tabs · comfortable · manual"} orientation={"vertical"} activation={"manual"} value={selected} onValueChange={setSelected} items={[
{id:"overview",label:"Course overview",content:<Typography>Explore learning objectives and course details.</Typography>},
{id:"lessons",label:"Lessons and activities",content:<Typography>12 lessons are ready for review.</Typography>},
{id:"archive",label:"Archived materials",disabled:true,content:<Typography>Unavailable</Typography>}
]} />
</Stack>
</ThemeScope>
</>
);
}
Choose a hidden section to place it last in the visible row. Long titles truncate in the row and remain complete in the menu; unavailable sections cannot be selected.
'use client';
import { useState } from 'react';
import { Tabs, Typography } from '@structured-growth/sg-ui/experimental';
export default function OverflowTabsExample() {
const [selected,setSelected]=useState("section-0");
return (
<>
<Tabs label="Course sections" overflow="menu" value={selected} onValueChange={setSelected} items={[
{ id: "section-0", label: "Overview", content: <Typography>{"Overview: content supplied by the host."}</Typography> },
{ id: "section-1", label: "Lessons", content: <Typography>{"Lessons: content supplied by the host."}</Typography> },
{ id: "section-2", label: "Learners", content: <Typography>{"Learners: content supplied by the host."}</Typography> },
{ id: "section-3", label: "Assignments", content: <Typography>{"Assignments: content supplied by the host."}</Typography> },
{ id: "section-4", label: "Discussions", content: <Typography>{"Discussions: content supplied by the host."}</Typography> },
{ id: "section-5", label: "Resources", content: <Typography>{"Resources: content supplied by the host."}</Typography> },
{ id: "section-6", label: "Calendar", content: <Typography>{"Calendar: content supplied by the host."}</Typography> },
{ id: "section-7", label: "Grades", content: <Typography>{"Grades: content supplied by the host."}</Typography> },
{ id: "section-8", label: "Settings", content: <Typography>{"Settings: content supplied by the host."}</Typography> },
{ id: "section-9", label: "Analytics", content: <Typography>{"Analytics: content supplied by the host."}</Typography> },
{ id: "section-10", label: "Certificates", content: <Typography>{"Certificates: content supplied by the host."}</Typography> },
{ id: "section-11", label: "Integrations", content: <Typography>{"Integrations: content supplied by the host."}</Typography> },
{ id: "section-12", label: "Accessibility and accommodations with a deliberately very long section name", content: <Typography>{"Accessibility and accommodations with a deliberately very long section name: content supplied by the host."}</Typography> },
{ id: "section-13", label: "Activity log", content: <Typography>{"Activity log: content supplied by the host."}</Typography> },
{ id: "section-14", label: "Legacy reports", disabled: true, content: <Typography>{"Legacy reports: content supplied by the host."}</Typography> }
]}/>
</>
);
}
Choose a hidden section to place it last in the visible row. Long titles truncate in the row and remain complete in the menu; unavailable sections cannot be selected.
'use client';
import { useState } from 'react';
import { Tabs, Typography } from '@structured-growth/sg-ui/experimental';
export default function OverflowTabsExample() {
const [selected,setSelected]=useState("section-0");
return (
<>
<Tabs label="Course sections" overflow="menu" value={selected} onValueChange={setSelected} items={[
{ id: "section-0", label: "Overview", content: <Typography>{"Overview: content supplied by the host."}</Typography> },
{ id: "section-1", label: "Lessons", content: <Typography>{"Lessons: content supplied by the host."}</Typography> },
{ id: "section-2", label: "Learners", content: <Typography>{"Learners: content supplied by the host."}</Typography> },
{ id: "section-3", label: "Assignments", content: <Typography>{"Assignments: content supplied by the host."}</Typography> },
{ id: "section-4", label: "Discussions", content: <Typography>{"Discussions: content supplied by the host."}</Typography> },
{ id: "section-5", label: "Resources", content: <Typography>{"Resources: content supplied by the host."}</Typography> },
{ id: "section-6", label: "Calendar", content: <Typography>{"Calendar: content supplied by the host."}</Typography> },
{ id: "section-7", label: "Grades", content: <Typography>{"Grades: content supplied by the host."}</Typography> },
{ id: "section-8", label: "Settings", content: <Typography>{"Settings: content supplied by the host."}</Typography> },
{ id: "section-9", label: "Analytics", content: <Typography>{"Analytics: content supplied by the host."}</Typography> },
{ id: "section-10", label: "Certificates", content: <Typography>{"Certificates: content supplied by the host."}</Typography> },
{ id: "section-11", label: "Integrations", content: <Typography>{"Integrations: content supplied by the host."}</Typography> },
{ id: "section-12", label: "Accessibility and accommodations with a deliberately very long section name", content: <Typography>{"Accessibility and accommodations with a deliberately very long section name: content supplied by the host."}</Typography> },
{ id: "section-13", label: "Activity log", content: <Typography>{"Activity log: content supplied by the host."}</Typography> },
{ id: "section-14", label: "Legacy reports", disabled: true, content: <Typography>{"Legacy reports: content supplied by the host."}</Typography> }
]}/>
</>
);
}
Secondary sections stay in the menu even with spare room. Selecting one promotes it into the final visible position.
'use client';
import { useState } from 'react';
import { Tabs, Typography } from '@structured-growth/sg-ui/experimental';
export default function SecondaryTabsExample() {
const [selected,setSelected]=useState("section-0");
return (
<>
<Tabs label="Course sections" overflow="menu" value={selected} onValueChange={setSelected} items={[
{ id: "section-0", label: "Overview", content: <Typography>{"Overview: content supplied by the host."}</Typography> },
{ id: "section-1", label: "Lessons", content: <Typography>{"Lessons: content supplied by the host."}</Typography> },
{ id: "section-2", label: "Activity log", priority: "secondary", content: <Typography>{"Activity log: content supplied by the host."}</Typography> },
{ id: "section-3", label: "Advanced settings", priority: "secondary", content: <Typography>{"Advanced settings: content supplied by the host."}</Typography> }
]}/>
</>
);
}
Secondary sections stay in the menu even with spare room. Selecting one promotes it into the final visible position.
'use client';
import { useState } from 'react';
import { Tabs, Typography } from '@structured-growth/sg-ui/experimental';
export default function SecondaryTabsExample() {
const [selected,setSelected]=useState("section-0");
return (
<>
<Tabs label="Course sections" overflow="menu" value={selected} onValueChange={setSelected} items={[
{ id: "section-0", label: "Overview", content: <Typography>{"Overview: content supplied by the host."}</Typography> },
{ id: "section-1", label: "Lessons", content: <Typography>{"Lessons: content supplied by the host."}</Typography> },
{ id: "section-2", label: "Activity log", priority: "secondary", content: <Typography>{"Activity log: content supplied by the host."}</Typography> },
{ id: "section-3", label: "Advanced settings", priority: "secondary", content: <Typography>{"Advanced settings: content supplied by the host."}</Typography> }
]}/>
</>
);
}
Scroll horizontally through all 15 sections. Keyboard navigation reveals the focused tab without moving the surrounding page.
Overview: content supplied by the host.
'use client';
import { useState } from 'react';
import { Tabs, Typography } from '@structured-growth/sg-ui/experimental';
export default function ScrollingTabsExample() {
const [selected,setSelected]=useState("section-0");
return (
<>
<Tabs label="Course sections" overflow="scroll" value={selected} onValueChange={setSelected} items={[
{ id: "section-0", label: "Overview", content: <Typography>{"Overview: content supplied by the host."}</Typography> },
{ id: "section-1", label: "Lessons", content: <Typography>{"Lessons: content supplied by the host."}</Typography> },
{ id: "section-2", label: "Learners", content: <Typography>{"Learners: content supplied by the host."}</Typography> },
{ id: "section-3", label: "Assignments", content: <Typography>{"Assignments: content supplied by the host."}</Typography> },
{ id: "section-4", label: "Discussions", content: <Typography>{"Discussions: content supplied by the host."}</Typography> },
{ id: "section-5", label: "Resources", content: <Typography>{"Resources: content supplied by the host."}</Typography> },
{ id: "section-6", label: "Calendar", content: <Typography>{"Calendar: content supplied by the host."}</Typography> },
{ id: "section-7", label: "Grades", content: <Typography>{"Grades: content supplied by the host."}</Typography> },
{ id: "section-8", label: "Settings", content: <Typography>{"Settings: content supplied by the host."}</Typography> },
{ id: "section-9", label: "Analytics", content: <Typography>{"Analytics: content supplied by the host."}</Typography> },
{ id: "section-10", label: "Certificates", content: <Typography>{"Certificates: content supplied by the host."}</Typography> },
{ id: "section-11", label: "Integrations", content: <Typography>{"Integrations: content supplied by the host."}</Typography> },
{ id: "section-12", label: "Accessibility and accommodations with a deliberately very long section name", content: <Typography>{"Accessibility and accommodations with a deliberately very long section name: content supplied by the host."}</Typography> },
{ id: "section-13", label: "Activity log", content: <Typography>{"Activity log: content supplied by the host."}</Typography> },
{ id: "section-14", label: "Legacy reports", disabled: true, content: <Typography>{"Legacy reports: content supplied by the host."}</Typography> }
]}/>
</>
);
}
Scroll horizontally through all 15 sections. Keyboard navigation reveals the focused tab without moving the surrounding page.
Overview: content supplied by the host.
'use client';
import { useState } from 'react';
import { Tabs, Typography } from '@structured-growth/sg-ui/experimental';
export default function ScrollingTabsExample() {
const [selected,setSelected]=useState("section-0");
return (
<>
<Tabs label="Course sections" overflow="scroll" value={selected} onValueChange={setSelected} items={[
{ id: "section-0", label: "Overview", content: <Typography>{"Overview: content supplied by the host."}</Typography> },
{ id: "section-1", label: "Lessons", content: <Typography>{"Lessons: content supplied by the host."}</Typography> },
{ id: "section-2", label: "Learners", content: <Typography>{"Learners: content supplied by the host."}</Typography> },
{ id: "section-3", label: "Assignments", content: <Typography>{"Assignments: content supplied by the host."}</Typography> },
{ id: "section-4", label: "Discussions", content: <Typography>{"Discussions: content supplied by the host."}</Typography> },
{ id: "section-5", label: "Resources", content: <Typography>{"Resources: content supplied by the host."}</Typography> },
{ id: "section-6", label: "Calendar", content: <Typography>{"Calendar: content supplied by the host."}</Typography> },
{ id: "section-7", label: "Grades", content: <Typography>{"Grades: content supplied by the host."}</Typography> },
{ id: "section-8", label: "Settings", content: <Typography>{"Settings: content supplied by the host."}</Typography> },
{ id: "section-9", label: "Analytics", content: <Typography>{"Analytics: content supplied by the host."}</Typography> },
{ id: "section-10", label: "Certificates", content: <Typography>{"Certificates: content supplied by the host."}</Typography> },
{ id: "section-11", label: "Integrations", content: <Typography>{"Integrations: content supplied by the host."}</Typography> },
{ id: "section-12", label: "Accessibility and accommodations with a deliberately very long section name", content: <Typography>{"Accessibility and accommodations with a deliberately very long section name: content supplied by the host."}</Typography> },
{ id: "section-13", label: "Activity log", content: <Typography>{"Activity log: content supplied by the host."}</Typography> },
{ id: "section-14", label: "Legacy reports", disabled: true, content: <Typography>{"Legacy reports: content supplied by the host."}</Typography> }
]}/>
</>
);
}