From bc297e5e496d9f48ef77581b7fb41fdf328a62cf Mon Sep 17 00:00:00 2001 From: kj_sh604 Date: Sun, 15 Mar 2026 16:19:35 -0400 Subject: refactor: dev-docs/ --- .../api/children-components/main-menu.mdx | 169 +++++++++++++++++++++ 1 file changed, 169 insertions(+) create mode 100644 dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx (limited to 'dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx') diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx new file mode 100644 index 0000000..b0062d9 --- /dev/null +++ b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx @@ -0,0 +1,169 @@ +# MainMenu + +By default Excalidraw will render the `MainMenu` with default options. If you want to customise the `MainMenu`, you can pass the `MainMenu` component with the list options. + +**Usage** + +```jsx live +function App() { + return ( +
+ + + window.alert("Item1")}> + Item1 + + window.alert("Item2")}> + Item 2 + + + +
+ ); +} +``` + +### `` + +This is the `MainMenu` component. If you render it, you will need to populate the menu with your own items as we will not render any ourselves at that point. + +| Prop | Type | Required | Default | Description | +| --- | --- | :-: | :-: | --- | +| `onSelect` | `function` | No | - | Triggered when any item is selected (via mouse). Calling `event.preventDefault()` will stop menu from closing. | + +### MainMenu.Item + +To render an item, its recommended to use `MainMenu.Item`. + +| Prop | Type | Required | Default | Description | +| --- | --- | :-: | :-: | --- | +| `onSelect` | `function` | Yes | - | Triggered when selected (via mouse). Calling `event.preventDefault()` will stop menu from closing. | +| `selected` | `boolean` | No | `false` | Whether item is active | +| `children` | `React.ReactNode` | Yes | - | The content of the menu item | +| `icon` | `JSX.Element` | No | - | The icon used in the menu item | +| `shortcut` | `string` | No | - | The shortcut to be shown for the menu item | + +### MainMenu.ItemLink + +To render an item as a link, its recommended to use `MainMenu.ItemLink`. + +**Usage** + +```jsx live +function App() { + return ( +
+ + + + Google + + + Excalidraw + + + +
+ ); +} +``` + +| Prop | Type | Required | Default | Description | +| --- | --- | :-: | :-: | --- | +| `onSelect` | `function` | No | - | Triggered when selected (via mouse). Calling `event.preventDefault()` will stop menu from closing. | +| `selected` | `boolean` | No | `false` | Whether item is active | +| `href` | `string` | Yes | - | The `href` attribute to be added to the `anchor` element. | +| `children` | `React.ReactNode` | Yes | - | The content of the menu item | +| `icon` | `JSX.Element` | No | - | The icon used in the menu item | +| `shortcut` | `string` | No | - | The shortcut to be shown for the menu item | + +### MainMenu.ItemCustom + +To render a custom item, you can use `MainMenu.ItemCustom`. + +**Usage** + +```jsx live +function App() { + return ( +
+ + + + + + + +
+ ); +} +``` + +| Prop | Type | Required | Default | Description | +| --- | --- | :-: | :-: | --- | +| `children` | `React.ReactNode` | Yes | - | The content of the menu item | + +### MainMenu.DefaultItems + +For the items which are shown in the menu in [excalidraw.com](https://excalidraw.com), you can use `MainMenu.DefaultItems` + +```jsx live +function App() { + return ( +
+ + + + + window.alert("Item1")}> + Item1 + + window.alert("Item2")}> + Item 2 + + + +
+ ); +} +``` + +Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/components/main-menu/DefaultItems.tsx) of the default items. + +### MainMenu.Group + +To Group item in the main menu, you can use `MainMenu.Group` + +```jsx live +function App() { + return ( +
+ + + + + + + + window.alert("Item1")}> + Item1 + + window.alert("Item2")}> + Item 2 + + + + +
+ ); +} +``` + +| Prop | Type | Required | Default | Description | +| --- | --- | :-: | :-: | --- | +| `children ` | `React.ReactNode` | Yes | - | The content of the `Menu Group` | -- cgit v1.2.3