The ContextMenu component displays a contextual pop-up menu that appears relative to a target element or specific screen coordinates. It is designed for surfacing a list of commands or options in response to user interactions such as clicks or right-clicks. This component is part of the Surfaces group and supports features like submenus, dividers, headers, and disabled items. It is ideal when you need to present contextual actions without cluttering the main UI.
Usage
The ContextMenu is instantiated using the static helper method from the Tesserae.UI class. Items can be added via the fluent API using the Items method, and the menu is shown by calling ShowFor (with either an IComponent or an HTMLElement) or ShowAt (with explicit x, y coordinates). When the menu is active, it manages focus and supports keyboard navigation (up/down arrows to navigate, Esc to dismiss).
Below is a minimalistic sample demonstrating how to create and show a basic ContextMenu:
context-menu-sample.js
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;
namespace Tesserae.Tests
{
internal static class App
{
private static void Main()
{
var sampleComponent = new MyContextMenuSample();
document.body.style.overflow = "hidden";
MountCenteredToBody(sampleComponent);
}
}
public class MyContextMenuSample : IComponent
{
public HTMLElement Render()
{
// Create a context menu and add items
var contextMenu = ContextMenu().Items(
ContextMenuItem("New").OnClick((s, e) => Toast().Information("New clicked")),
ContextMenuItem().Divider(),
ContextMenuItem("Edit").OnClick((s, e) => Toast().Information("Edit clicked")),
ContextMenuItem("Delete").Disabled() // a disabled item
);
// Create a button that triggers the context menu
Button button = null;
button = Button("Open Context Menu").OnClick((s, e) => {
// Show the context menu relative to the button
contextMenu.ShowFor(button);
});
return button.Render();
}
}
}
Public Properties
No public properties are explicitly exposed for the ContextMenu component.
API reference
class
ContextMenu
public sealed partial class ContextMenu : Layer<ContextMenu>, IContainer<ContextMenu, ContextMenu.Item>
A right-click / hover-driven popup menu with support for items, headers, dividers and arbitrarily deep nested
submenus.
Constructors
Constructor
ContextMenu
public ContextMenu()
Initializes a new instance of this class.
Methods
Method
ContextMenu.Clear
public void Clear()
Clears the component's current state.
Method
ContextMenu.Replace
public void Replace(Item newComponent, Item oldComponent)
Replaces an existing item with a new one.
Method
ContextMenu.Add
public void Add(Item component)
Adds the given item to the component.
Method
ContextMenu.OnHide
public ContextMenu OnHide(Action onHidden)
Registers a callback invoked when the hide event fires.
Method
ContextMenu.Render
public override HTMLElement Render()
Renders the component's root HTML element.
Method
ContextMenu.Show
public override ContextMenu Show()
Shows the component.
Method
ContextMenu.ShowFor
public void ShowFor(IComponent component, int distanceX = 1, int distanceY = 1)
Shows the for.
Method
ContextMenu.ShowAt
public void ShowAt(int x, int y, int minWidth)
Shows the at.
Method
ContextMenu.ShowFor
public void ShowFor(HTMLElement element, int distanceX = 1, int distanceY = 1)
Shows the for.
Method
ContextMenu.Hide
public override void Hide(Action onHidden = null)
Hides the component.
Method
ContextMenu.Items
public ContextMenu Items(params Item[] children)
Adds the given items to the component.
class
ContextMenu
public sealed partial class ContextMenu
A right-click / hover-driven popup menu with support for items, headers, dividers and arbitrarily deep nested
submenus.
Samples
Basic ContextMenu with Standard Items
This sample demonstrates how to instantiate a ContextMenu, add standard menu items including a divider and a disabled item, and then show the menu relative to a button click.
context-menu-2-sample.js
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;
namespace Tesserae.Tests
{
internal static class App
{
private static void Main()
{
var sampleComponent = new ContextMenuBasicSample();
document.body.style.overflow = "hidden";
MountCenteredToBody(sampleComponent);
}
}
public class ContextMenuBasicSample : IComponent
{
public HTMLElement Render()
{
// Create the ContextMenu with a set of items.
var contextMenu = ContextMenu().Items(
ContextMenuItem("New").OnClick((s, e) => Toast().Information("New clicked")),
ContextMenuItem().Divider(),
ContextMenuItem("Edit").OnClick((s, e) => Toast().Information("Edit clicked")),
ContextMenuItem("Properties").OnClick((s, e) => Toast().Information("Properties clicked")),
ContextMenuItem("Header").Header(),
ContextMenuItem("Disabled").Disabled(),
ContextMenuItem("Link").OnClick((s, e) => Toast().Information("Link clicked"))
);
// Create a button that will trigger the ContextMenu.
Button openButton = null;
openButton = Button("Open Context Menu").OnClick((s, e) =>
{
// Display the context menu relative to the button.
contextMenu.ShowFor(openButton);
});
return openButton.Render();
}
}
}
ContextMenu with Submenus
This sample demonstrates a ContextMenu that includes items with submenus. Submenus are defined by creating additional ContextMenu instances and attaching them to a parent menu item.
context-menu-3-sample.js
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;
namespace Tesserae.Tests
{
internal static class App
{
private static void Main()
{
var sampleComponent = new ContextMenuWithSubmenusSample();
document.body.style.overflow = "hidden";
MountCenteredToBody(sampleComponent);
}
}
public class ContextMenuWithSubmenusSample : IComponent
{
public HTMLElement Render()
{
// Define the submenu for additional editing options.
var subMenu = ContextMenu().Items(
ContextMenuItem("Sub Edit 1").OnClick((s, e) => Toast().Information("Sub Edit 1 clicked")),
ContextMenuItem("Sub Edit 2").OnClick((s, e) => Toast().Information("Sub Edit 2 clicked"))
);
// Create the main ContextMenu and attach a submenu to one of the items.
var mainMenu = ContextMenu().Items(
ContextMenuItem("New").OnClick((s, e) => Toast().Information("New clicked")),
ContextMenuItem("Edit").OnClick((s, e) => Toast().Information("Edit clicked")),
ContextMenuItem("More Options").SubMenu(subMenu),
ContextMenuItem("Disabled").Disabled()
);
// Create a button that triggers the main context menu.
Button button = null;
button = Button("Open Menu with Submenus").OnClick((s, e) =>
{
mainMenu.ShowFor(button);
});
return button.Render();
}
}
}
See also
ContextMenuItem: a nested item type used by ContextMenu to define individual menu entries.
Toast: Use Toast to provide user feedback when commands are executed.
Dialog, Panel: Other surface components that manage overlays and user interactions.
