Morpheus: Web Components UI Kit

Context menu#

Component <neo-contextmenu> is a right-click menu built from the same <neo-menuitem> and <neo-submenu> rows as <neo-menu> . Mark the focusable element with data-neo-contextmenu-trigger; everything else inside becomes the menu panel. Opens via the keyboard context-menu key and Shift+F10 as well.

Right-click this note

Open

Rename

Inbox

Signals

Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.

Reference#

Attributes #

Name	Type	Default	Description
`open`	`boolean` reflected observed	`false`	Open state. Usually controlled by the host after a right-click or keyboard context-menu invocation.
`mode`	`"auto" \| "cascade" \| "push"` observed	`"auto"`	Nested submenu strategy. Matches `neo-menu`: cascade on roomy pointers, push on narrow or touch-first contexts.
`screen-offset`	`CSS length` observed	`8px`	Minimum distance between the panel and viewport edge.
`clamp-placement`	`boolean` observed	`false`	Allows the panel to re-anchor from the pointer when needed to remain visible.
`min-fit-height`	`CSS length \| "content"` observed	`"content"`	Strict-placement flip threshold inherited by submenus.
`min-fit-width`	`CSS length \| "content"` observed	`"content"`	Strict-placement flip threshold inherited by submenus.

Slots #

Name	Description
`[data-neo-contextmenu-trigger]`	Required descendant (any depth, but not inside a nested `<neo-menu>` or `<neo-contextmenu>`) that receives the `contextmenu` and keyboard handlers. The first match wins.
`<neo-menu>`	Exactly one required `<neo-menu>` child holding the rows. It supplies all menu behavior; the context menu only opens it at the pointer. Zero or multiple warn in the console.

Events #

Name	Detail	Bubbles	Description
`neo-contextmenu-open`	none	yes	Fires when the menu opens.
`neo-contextmenu-close`	none	yes	Fires when the menu closes.
`neo-menuitem-select`	none	yes	Bubbles from selected child rows with `{ value }`.

Examples#

Simple#

A context menu wraps one trigger surface and a set of menu rows. The trigger stays in the page; the rows move into the generated floating panel.

Right-click this note

Open

Rename

Duplicate

Delete

Hide

HTML

Templ

CSS

Nested#

Context menus can be nested inside another trigger surface. Right-clicking the inner target opens its own menu without also opening the parent menu.

Workspace Right-click the blue workspace area.

Docs folder Right-click the green folder block.

Preview file

Copy path

Open folder

Rename folder

Duplicate folder

Share folder

New file

New folder

Sync workspace

Workspace settings

Archive workspace

Hide

HTML

Templ

CSS

package examples

import "github.com/romshark/morpheus/neo"

templ ContextMenuNested() {
	@neo.ContextMenuAttrs(neo.ContextMenuOpts{}, templ.Attributes{"class": "cm-workspace"}) {
		@neo.ContextMenuTriggerAttrs(templ.Attributes{"class": "cm-layer-target"}) {
			<strong>Workspace</strong>
			<span>Right-click the blue workspace area.</span>
			@neo.ContextMenuAttrs(neo.ContextMenuOpts{}, templ.Attributes{"class": "cm-folder"}) {
				@neo.ContextMenuTriggerAttrs(templ.Attributes{"class": "cm-layer-target"}) {
					<strong>Docs folder</strong>
					<span>Right-click the green folder block.</span>
					@neo.ContextMenuAttrs(neo.ContextMenuOpts{}, templ.Attributes{"class": "cm-file"}) {
						<button type="button" data-neo-contextmenu-trigger class="cm-layer-target">
							<strong>readme.md</strong>
							<span>Right-click the amber file chip.</span>
						</button>
						@neo.Menu(neo.MenuOpts{}) {
							@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("preview-file")}) {
								Preview file
							}
							@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("copy-path")}) {
								Copy path
							}
						}
					}
				}
				@neo.Menu(neo.MenuOpts{}) {
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("open-folder")}) {
						Open folder
					}
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("rename-folder")}) {
						Rename folder
					}
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("duplicate-folder")}) {
						Duplicate folder
					}
					<hr/>
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("share-folder")}) {
						Share folder
					}
				}
			}
		}
		@neo.Menu(neo.MenuOpts{}) {
			@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("new-file")}) {
				New file
			}
			@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("new-folder")}) {
				New folder
			}
			@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("sync-workspace")}) {
				Sync workspace
			}
			@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("workspace-settings")}) {
				Workspace settings
			}
			<hr/>
			@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("archive-workspace")}) {
				Archive workspace
			}
		}
	}
}

Custom content#

The trigger is regular light DOM and the panel uses the same menu CSS variables, so custom target surfaces, icon rows, widths, and danger treatments can be handled with a scoped stylesheet.

invoice-042.pdf Right-click for file actions

Copy link

Copy filename

Delete

Hide

HTML

Templ

CSS

A wider screen, please

Context menu#

Signals

Reference#

Attributes #

Slots #

Events #

Examples#

Simple#

Nested#

Custom content#

Settings

Theme

Accessibility

Playgrounds

Server Simulator