import { DefaultActionsMenu, DefaultActionsMenuContent, DefaultColorStyle, DefaultContextMenu, DefaultContextMenuContent, DefaultDebugMenu, DefaultDebugMenuContent, DefaultHelpMenu, DefaultHelpMenuContent, DefaultKeyboardShortcutsDialog, DefaultKeyboardShortcutsDialogContent, DefaultMainMenu, DefaultMainMenuContent, DefaultPageMenu, DefaultQuickActions, DefaultQuickActionsContent, DefaultStylePanel, DefaultStylePanelContent, DefaultToolbar, DefaultToolbarContent, DefaultZoomMenu, DefaultZoomMenuContent, TLComponents, Tldraw, TldrawUiButton, TldrawUiButtonLabel, TldrawUiMenuGroup, TldrawUiMenuItem, TLUiContextMenuProps, TLUiKeyboardShortcutsDialogProps, TLUiStylePanelProps, useEditor, useIsToolSelected, useRelevantStyles, useTools, } from 'tldraw' import 'tldraw/tldraw.css' //[1] function CustomActionsMenu() { return (

{ window.open('https://x.com/tldraw', '_blank') }} />

) } //[2] function CustomContextMenu(props: TLUiContextMenuProps) { return (

{ window.open('https://x.com/tldraw', '_blank') }} />

) } //[3] function CustomDebugMenu() { return (

{ window.open('https://x.com/tldraw', '_blank') }} />

) } //[4] function CustomHelpMenu() { return (

{ window.open('https://x.com/tldraw', '_blank') }} />

) } //[5] function CustomKeyboardShortcutsDialog(props: TLUiKeyboardShortcutsDialogProps) { return (

{ window.open('https://x.com/tldraw', '_blank') }} />

) } //[6] function CustomMainMenu() { return (

{ window.open('https://x.com/tldraw', '_blank') }} />

) } //[7] function CustomNavigationPanel() { return

here you are

} //[8] function CustomPageMenu() { return (

) } //[9] function CustomQuickActions() { return (

window.alert('code')} />

) } //[10] function CustomStylePanel(props: TLUiStylePanelProps) { const editor = useEditor() // Styles are complex, sorry. Check our DefaultStylePanel for an example. const styles = useRelevantStyles() return (

{ editor.setStyleForSelectedShapes(DefaultColorStyle, 'red') }} > Red

{ editor.setStyleForSelectedShapes(DefaultColorStyle, 'green') }} > Green

) } //[11] function CustomToolbar() { const editor = useEditor() const tools = useTools() const isScreenshotSelected = useIsToolSelected(tools['rhombus-2']) return (

) } //[12] function CustomZoomMenu() { return (

{ window.open('https://x.com/tldraw', '_blank') }} />

) } const components: TLComponents = { ActionsMenu: CustomActionsMenu, ContextMenu: CustomContextMenu, DebugMenu: CustomDebugMenu, HelpMenu: CustomHelpMenu, KeyboardShortcutsDialog: CustomKeyboardShortcutsDialog, MainMenu: CustomMainMenu, NavigationPanel: CustomNavigationPanel, PageMenu: CustomPageMenu, QuickActions: CustomQuickActions, StylePanel: CustomStylePanel, Toolbar: CustomToolbar, ZoomMenu: CustomZoomMenu, } export default function CustomActionsMenuExample() { return (

) } /* You can use the `components` prop to override tldraw's default menus. You can provide a React component of your own, import our default component and edit it, or return null to hide it completely. This example demonstrates how to do this with every menu in tldraw. [1] The actions menu is a dropdown menu that can be found in the top-left of the tldraw component, or just above the toolbar on smaller screens. It contains actions related to editing shapes such as grouping, rotating or changing shape order. [2] Create some shapes, select them and right click the selection to see the custom context menu. [3] The debug menu contains helpful menu items for debugging the tldraw component. To show the debug menu, turn on debug mode in the preferences. [4] The help menu contains menu items to change the language of the application, and to open the keyboard shortcuts dialog. [5] The keyboard shortcuts dialog is a modal that shows all the keyboard shortcuts available in tldraw. You can open it via the help menu. [6] The main menu contains important submenus: Edit, Shape, Preferences etc. To open the main menu, click the hamburger icon in the top left corner of the tldraw component. [7] The navigation panel is in the bottom left of the tldraw component at larger breakpoints. It contains zoom controls and a mini map. [8] The page menu contains options for creating and editing pages. To open the page menu, click the page name in the top left of the tldraw component. [9] The quick actions menu is a dropdown menu that appears in the Main Menu, or above the toolbar on smaller screens. [10] The style panel is a panel that appears on the right side of the tldraw component. It contains options to change the style of shapes, such as color, stroke width, and opacity. [11] The toolbar contains tools to create shapes, select shapes, and more. [12] The zoom menu is in the bottom left of the tldraw component, the button to open it is labeled with a percentage indicating the editor's current zoom level. */

Changing default menus