Components
Menu
A fold for secondary actions with a dropdown panel.
A fold for secondary actions: a «More» button and a dropdown panel. You put ready-made buttons inside as they are — they need to know nothing about the menu.
Example
import { Menu, MenuItem } from "@toimetdev/pathlogs-core";
<Menu label="More" count={3} tip="Other actions">
<MenuItem onClick={exportExcel}>Export to Excel</MenuItem>
<MenuItem href="/projects/1/templates">Task templates</MenuItem>
<MenuItem tone="danger" onClick={archive}>Archive project</MenuItem>
</Menu>An entry with href renders as a link rather than a button — so that Ctrl+click and «open in new tab» work.
Dialogs inside a menu
The most common scenario: a menu item opens a modal. The naive implementation breaks right here.
<Menu>
<MenuItem onClick={() => setOpen(true)}>Delete project</MenuItem>
<ConfirmDialog open={open} onConfirm={remove} onCancel={() => setOpen(false)} />
</Menu>Your own button
The default button is three dots with a caption. If you need a different one, pass a trigger: it receives the open state and a toggle.
<Menu
trigger={({ open, toggle }) => (
<Button variant={open ? "primary" : "secondary"} onClick={toggle}>
Actions {open ? "▲" : "▼"}
</Button>
)}
>
<MenuItem onClick={…}>…</MenuItem>
</Menu>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | The panel's contents. |
label | string | "More" | The button caption. Hidden on narrow screens, leaving the icon. |
trigger | (props: { open, toggle }) => ReactNode | — | Your own button instead of the default one. |
count | number | — | How many actions are hidden — as a number on the button. |
align | "start" | "end" | "end" | Which side the panel drops from. |
tip | string | — | A tooltip on the button. |
children*ReactNodeThe panel's contents.
labelstringdefaults to: "More"
The button caption. Hidden on narrow screens, leaving the icon.
trigger(props: { open, toggle }) => ReactNodeYour own button instead of the default one.
countnumberHow many actions are hidden — as a number on the button.
align"start" | "end"defaults to: "end"
Which side the panel drops from.
tipstringA tooltip on the button.
MenuItem takes onClick or href, icon, tone (default or danger) and disabled.