@excalidraw/excalidrawAPIChildren Components
SDK

MainMenu

Customize the main menu with your own and the default items.

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

import { Excalidraw, MainMenu } from "@excalidraw/excalidraw";

function App() {
  return (
    <div style={{ height: "300px" }}>
      <Excalidraw>
        <MainMenu>
          <MainMenu.Item onSelect={() => window.alert("Item1")}>
            Item1
          </MainMenu.Item>
          <MainMenu.Item onSelect={() => window.alert("Item2")}>
            Item 2
          </MainMenu.Item>
        </MainMenu>
      </Excalidraw>
    </div>
  );
}

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.

PropTypeRequiredDefaultDescription
onSelectfunctionNo-Triggered when any item is selected (via mouse). Calling event.preventDefault() will stop menu from closing.

To render an item, its recommended to use MainMenu.Item.

PropTypeRequiredDefaultDescription
onSelectfunctionYes-Triggered when selected (via mouse). Calling event.preventDefault() will stop menu from closing.
selectedbooleanNofalseWhether item is active
childrenReact.ReactNodeYes-The content of the menu item
iconJSX.ElementNo-The icon used in the menu item
shortcutstringNo-The shortcut to be shown for the menu item

To render an item as a link, its recommended to use MainMenu.ItemLink.

Usage

import { Excalidraw, MainMenu } from "@excalidraw/excalidraw";

function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw>
        <MainMenu>
          <MainMenu.ItemLink href="https://google.com">
            Google
          </MainMenu.ItemLink>
          <MainMenu.ItemLink href="https://excalidraw.com">
            Excalidraw
          </MainMenu.ItemLink>
        </MainMenu>
      </Excalidraw>
    </div>
  );
}
PropTypeRequiredDefaultDescription
onSelectfunctionNo-Triggered when selected (via mouse). Calling event.preventDefault() will stop menu from closing.
selectedbooleanNofalseWhether item is active
hrefstringYes-The href attribute to be added to the anchor element.
childrenReact.ReactNodeYes-The content of the menu item
iconJSX.ElementNo-The icon used in the menu item
shortcutstringNo-The shortcut to be shown for the menu item

To render a custom item, you can use MainMenu.ItemCustom.

Usage

import { Excalidraw, MainMenu } from "@excalidraw/excalidraw";

function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw>
        <MainMenu>
          <MainMenu.ItemCustom>
            <button
              style={{ height: "2rem" }}
              onClick={() => window.alert("custom menu item")}
            >
              custom item
            </button>
          </MainMenu.ItemCustom>
        </MainMenu>
      </Excalidraw>
    </div>
  );
}
PropTypeRequiredDefaultDescription
childrenReact.ReactNodeYes-The content of the menu item

For the items which are shown in the menu in excalidraw.com, you can use MainMenu.DefaultItems

import { Excalidraw, MainMenu } from "@excalidraw/excalidraw";

function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw>
        <MainMenu>
          <MainMenu.DefaultItems.Socials />
          <MainMenu.DefaultItems.Export />
          <MainMenu.Item onSelect={() => window.alert("Item1")}>
            Item1
          </MainMenu.Item>
          <MainMenu.Item onSelect={() => window.alert("Item2")}>
            Item 2
          </MainMenu.Item>
        </MainMenu>
      </Excalidraw>
    </div>
  );
}

Here is a complete list of the default items.

To Group item in the main menu, you can use MainMenu.Group

import { Excalidraw, MainMenu } from "@excalidraw/excalidraw";

function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw>
        <MainMenu>
          <MainMenu.Group title="Excalidraw items">
            <MainMenu.DefaultItems.Socials />
            <MainMenu.DefaultItems.Export />
          </MainMenu.Group>
          <MainMenu.Group title="custom items">
            <MainMenu.Item onSelect={() => window.alert("Item1")}>
              Item1
            </MainMenu.Item>
            <MainMenu.Item onSelect={() => window.alert("Item2")}>
              Item 2
            </MainMenu.Item>
          </MainMenu.Group>
        </MainMenu>
      </Excalidraw>
    </div>
  );
}
PropTypeRequiredDefaultDescription
children React.ReactNodeYes-The content of the Menu Group

Last updated on

Children Components

Components you render as children of <Excalidraw/> to customize the UI.

WelcomeScreen

Customize the splash screen shown on an empty canvas.

On this page

<MainMenu>MainMenu.ItemMainMenu.ItemLinkMainMenu.ItemCustomMainMenu.DefaultItemsMainMenu.Group