menu — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited menu (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Dropdown menu positioned via ConnectedOverlay (Floating UI). Supports focus trapping, auto-width matching, and animated entrance/exit.
import { Menu } from 'reablocks';| Prop | Type | Default | Description | |
|---|---|---|---|---|
open | boolean | false | Whether the menu is visible | |
reference | any | — | Reference element for positioning | |
children | `ReactNode \ | (() => ReactNode)` | — | Menu content |
placement | Placement | 'bottom-start' | Floating UI placement | |
appendToBody | boolean | true | Portal to body | |
closeOnBodyClick | boolean | true | Close on outside click | |
closeOnEscape | boolean | true | Close on Escape key | |
autofocus | boolean | true | Focus trap on open | |
autoWidth | boolean | — | Match reference element width | |
minWidth | number | — | Minimum menu width | |
maxWidth | number | — | Maximum menu width | |
maxHeight | string | 'calc(100vh - 48px)' | Maximum menu height | |
animated | boolean | true | (deprecated) Enable animation | |
animation | MotionNodeAnimationOptions | — | Custom animation config | |
modifiers | Modifiers | — | Floating UI middleware | |
className | string | — | Menu container CSS classes | |
style | CSSProperties | — | Inline styles | |
onClose | (event: OverlayEvent) => void | — | Close handler | |
onMouseEnter | (event) => void | — | Mouse enter handler | |
onMouseLeave | (event) => void | — | Mouse leave handler | |
theme | MenuTheme | — | Per-instance theme override |
const ref = useRef();
const [open, setOpen] = useState(false);
<Button ref={ref} onClick={() => setOpen(!open)}>Open Menu</Button>
<Menu open={open} reference={ref} onClose={() => setOpen(false)}>
<List>
<ListItem onClick={() => action1()}>Item 1</ListItem>
<ListItem onClick={() => action2()}>Item 2</ListItem>
<ListItem onClick={() => action3()}>Item 3</ListItem>
</List>
</Menu>Match menu width to reference element:
<Menu open={open} reference={ref} autoWidth onClose={close}>
{() => <List>...</List>}
</Menu>interface MenuTheme {
base: string; // Outer container (relative, min-w, max-w, padding)
inner: string; // Inner container (focus:outline-hidden, bg, text)
}~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.