From 490c370c741057c621e583510139ef998ee5d7e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BF=E3=81=91CAT?= <mikecat@users.noreply.github.com>
Date: Thu, 11 Jan 2024 19:19:32 +0900
Subject: [PATCH] add MainMenu.Separator to the documentation

---
 .../api/children-components/main-menu.mdx     | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

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
index e601a2471..c35c62bab 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx
@@ -167,3 +167,27 @@ function App() {
 | Prop | Type | Required | Default | Description |
 | --- | --- | :-: | :-: | --- |
 | `children ` | `React.ReactNode` | Yes | - | The content of the `Menu Group` |
+
+### MainMenu.Separator
+
+To put a horizontal line between items, you can use `MainMenu.Separator`.
+
+```jsx live
+function App() {
+  return (
+    <div style={{ height: "500px" }}>
+      <Excalidraw>
+        <MainMenu>
+          <MainMenu.Item onSelect={() => window.alert("Item1")}>
+            Item1
+          </MainMenu.Item>
+          <MainMenu.Separator />
+          <MainMenu.Item onSelect={() => window.alert("Item2")}>
+            Item 2
+          </MainMenu.Item>
+        </MainMenu>
+      </Excalidraw>
+    </div>
+  );
+}
+```