SGUI / Development
Menu
Host-owned actions, checked items, disabled commands and shortcuts.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
No fixed SGUI child components.
Component documentation
SGUI / Development
Host-owned actions, checked items, disabled commands and shortcuts.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
Host-owned actions, checked items, disabled commands and shortcuts.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Menu, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function MenuPlaygroundExample() {
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">
<Stack gap={3}><Menu label={"Course actions"} placement={"bottom start"} selectionMode={"multiple"} errorMessage={""} trigger={<Button variant="outlined">Actions</Button>} items={[{id:"save",label:"Save",shortcut:"⌘S"},{id:"published",label:"Published",selected:action === "published"},{id:"archive",label:"Archive",disabled:true},{id:"delete",label:"Delete",tone:"danger",separatorBefore:true}]} onAction={setAction} /></Stack>
</ThemeScope>
</>
);
}
The same props in independent density scopes.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Menu, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function MenuPlaygroundDensitiesExample() {
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 (
<>
<Stack gap={3}>
<ThemeScope density="compact"><Stack gap={3}><Menu label={"Course actions"} placement={"bottom start"} selectionMode={"multiple"} errorMessage={""} trigger={<Button variant="outlined">Actions</Button>} items={[{id:"save",label:"Save",shortcut:"⌘S"},{id:"published",label:"Published",selected:action === "published"},{id:"archive",label:"Archive",disabled:true},{id:"delete",label:"Delete",tone:"danger",separatorBefore:true}]} onAction={setAction} /></Stack></ThemeScope>
<ThemeScope density="comfortable"><Stack gap={3}><Menu label={"Course actions"} placement={"bottom start"} selectionMode={"multiple"} errorMessage={""} trigger={<Button variant="outlined">Actions</Button>} items={[{id:"save",label:"Save",shortcut:"⌘S"},{id:"published",label:"Published",selected:action === "published"},{id:"archive",label:"Archive",disabled:true},{id:"delete",label:"Delete",tone:"danger",separatorBefore:true}]} onAction={setAction} /></Stack></ThemeScope>
</Stack>
</>
);
}