Skip to main content

​
MainMenu Component

The MainMenu component provides a customizable dropdown menu accessed via a hamburger icon. It’s typically positioned in the top-left corner of the editor and contains actions like load, export, help, and custom menu items.

​
Basic Usage

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

function App() {
  return (
    <div style={{ height: "100vh" }}>
      <Excalidraw>
        <MainMenu>
          <MainMenu.DefaultItems.LoadScene />
          <MainMenu.DefaultItems.Export />
          <MainMenu.DefaultItems.SaveAsImage />
          <MainMenu.Separator />
          <MainMenu.DefaultItems.Help />
        </MainMenu>
      </Excalidraw>
    </div>
  );
}

​
Props

​
children
React.ReactNode
Menu items and components to display in the dropdown. Can include MainMenu.Item, MainMenu.ItemLink, MainMenu.DefaultItems.*, MainMenu.Separator, and MainMenu.Group.
​
onSelect
function
Callback fired when any menu item is selected (clicked on).
onSelect?: (event: Event) => void;

​
Subcomponents

A clickable menu item that triggers an action. 
<MainMenu.Item 
  onSelect={handleAction}
  icon={<MyIcon />}
  shortcut="⌘K"
>
  Menu Item Label
</MainMenu.Item>
Props:
  • onSelect (function, required) - Callback when item is clicked
  • icon (JSX.Element) - Icon to display before the label
  • shortcut (string) - Keyboard shortcut to display
  • children (React.ReactNode) - Label content
A menu item that opens a link in a new tab. 
<MainMenu.ItemLink 
  href="https://example.com"
  icon={<LinkIcon />}
>
  External Link
</MainMenu.ItemLink>
Props:
  • href (string, required) - URL to open
  • icon (JSX.Element) - Icon to display before the label
  • shortcut (string) - Keyboard shortcut to display
  • children (React.ReactNode) - Label content
A fully custom menu item with complete control over rendering. 
<MainMenu.ItemCustom>
  <div className="custom-menu-item">
    {/* Your custom content */}
  </div>
</MainMenu.ItemCustom>
A visual separator between menu items. 
<MainMenu.Separator />
Groups related menu items together. 
<MainMenu.Group>
  <MainMenu.Item onSelect={handler1}>Item 1</MainMenu.Item>
  <MainMenu.Item onSelect={handler2}>Item 2</MainMenu.Item>
</MainMenu.Group>
Creates a submenu. 
<MainMenu.Sub label="More Options" icon={<MoreIcon />}>
  <MainMenu.Item onSelect={handler1}>Sub Item 1</MainMenu.Item>
  <MainMenu.Item onSelect={handler2}>Sub Item 2</MainMenu.Item>
</MainMenu.Sub>
Custom trigger component to open the menu (overrides default hamburger icon). 
<MainMenu.Trigger>
  <button>Open Menu</button>
</MainMenu.Trigger>

​
Default Items

Excalidraw provides pre-built menu items accessible via MainMenu.DefaultItems: Opens a file picker to load a scene from a .excalidraw file. 
<MainMenu.DefaultItems.LoadScene />
Saves the current scene to the active file. 
<MainMenu.DefaultItems.SaveToActiveFile />
Opens the export dialog to save as PNG, SVG, or JSON. 
<MainMenu.DefaultItems.Export />
Quickly export the canvas as an image. 
<MainMenu.DefaultItems.SaveAsImage />
Opens the help dialog showing keyboard shortcuts. 
<MainMenu.DefaultItems.Help />
Clears all elements from the canvas. 
<MainMenu.DefaultItems.ClearCanvas />
Toggles between light and dark themes. 
<MainMenu.DefaultItems.ToggleTheme />
Opens a color picker to change the canvas background. 
<MainMenu.DefaultItems.ChangeCanvasBackground />

​
Complete Examples

import { Excalidraw, MainMenu } from "@excalidraw/excalidraw";
import { 
  DownloadIcon, 
  SettingsIcon, 
  InfoIcon 
} from "./icons";

function App() {
  const handleExport = () => {
    // Custom export logic
  };

  const handleSettings = () => {
    // Open settings
  };

  return (
    <div style={{ height: "100vh" }}>
      <Excalidraw>
        <MainMenu onSelect={(e) => console.log("Menu item selected", e)}>
          {/* File operations */}
          <MainMenu.Group>
            <MainMenu.DefaultItems.LoadScene />
            <MainMenu.DefaultItems.SaveToActiveFile />
          </MainMenu.Group>
          
          <MainMenu.Separator />
          
          {/* Export options */}
          <MainMenu.Group>
            <MainMenu.DefaultItems.Export />
            <MainMenu.Item 
              onSelect={handleExport}
              icon={DownloadIcon}
              shortcut="⌘E"
            >
              Export to Cloud
            </MainMenu.Item>
          </MainMenu.Group>
          
          <MainMenu.Separator />
          
          {/* Canvas actions */}
          <MainMenu.Group>
            <MainMenu.DefaultItems.ChangeCanvasBackground />
            <MainMenu.DefaultItems.ClearCanvas />
          </MainMenu.Group>
          
          <MainMenu.Separator />
          
          {/* Settings & Help */}
          <MainMenu.Item 
            onSelect={handleSettings}
            icon={SettingsIcon}
          >
            Settings
          </MainMenu.Item>
          
          <MainMenu.ItemLink 
            href="https://docs.excalidraw.com"
            icon={InfoIcon}
          >
            Documentation
          </MainMenu.ItemLink>
          
          <MainMenu.DefaultItems.Help />
          
          <MainMenu.Separator />
          
          {/* Theme */}
          <MainMenu.DefaultItems.ToggleTheme />
        </MainMenu>
      </Excalidraw>
    </div>
  );
}

​
Styling

The MainMenu uses CSS classes that can be targeted for custom styling:
  • .main-menu-trigger - The hamburger icon button
  • .main-menu - The dropdown menu container
  • .main-menu-item - Individual menu items
.main-menu-trigger {
  color: #6965db;
}

.main-menu {
  min-width: 200px;
}

.main-menu-item:hover {
  background-color: #f3f4f6;
}

​
Best Practices

  1. Keep it simple - Don’t overcrowd the menu with too many items
  2. Group related actions - Use MainMenu.Group and MainMenu.Separator for better organization
  3. Use icons - Icons help users quickly identify actions
  4. Show shortcuts - Display keyboard shortcuts when available
  5. Handle mobile - The menu automatically adapts to mobile screens, showing the collaborators list when in collaboration mode

​
See Also