Tesserae - Context Menu

ContextMenu

Description

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.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.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.

Namespace: Tesserae
Inheritance: Layer<ContextMenu> → ContextMenu
Implements: IContainer<ContextMenu, ContextMenu.Item>

Constructors

Name	Description
ContextMenu	Initializes a new instance of this class.

Constructor

ContextMenu

public ContextMenu()

Initializes a new instance of this class.

Methods

Name	Description
Clear	Clears the component's current state.
Replace	Replaces an existing item with a new one.
Add	Adds the given item to the component.
SidePanel	Shows a panel of free content beside the menu's items, inside the same popup - details about the target, actions that do not read as menu rows. The panel is not a row: the arrow keys walk past it, and clicking inside it does not close the menu, so anything in it that should close the menu calls `Hide` itself. Call it before the menu is shown.
OnHide	Registers a callback invoked when the hide event fires.
Render	Renders the component's root HTML element.
Show	Shows the component.
ShowFor	Shows the for.
ShowAt	Shows the at.
Hide	Hides the component.
Items	Adds the given items to the component.

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.SidePanel

public ContextMenu SidePanel(IComponent panel)

Shows a panel of free content beside the menu's items, inside the same popup - details about the target, actions that do not read as menu rows. The panel is not a row: the arrow keys walk past it, and clicking inside it does not close the menu, so anything in it that should close the menu calls Hide itself. Call it before the menu is shown.

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

Overload
ShowFor(IComponent, int, int)	Shows the for.
ShowFor(HTMLElement, int, int)	Shows the for.

ShowFor(IComponent, int, int)

public void ShowFor(IComponent component, int distanceX = 1, int distanceY = 1)

Shows the for.

Parameters

component IComponent
distanceX int
distanceY int

ShowFor(HTMLElement, int, int)

public void ShowFor(HTMLElement element, int distanceX = 1, int distanceY = 1)

Shows the for.

Parameters

element HTMLElement
distanceX int
distanceY int

Method

ContextMenu.ShowAt

public void ShowAt(int x, int y, int minWidth)

Shows the at.

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.

Namespace: Tesserae

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.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.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.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.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();
        }
    }
}

ContextMenu

Description

Usage

Public Properties

API reference

Constructors

ContextMenu

Methods

ContextMenu.Clear

ContextMenu.Replace

ContextMenu.Add

ContextMenu.SidePanel

ContextMenu.OnHide

ContextMenu.Render

ContextMenu.Show

ContextMenu.ShowFor

ShowFor(IComponent, int, int)

Parameters

ShowFor(HTMLElement, int, int)

Parameters

ContextMenu.ShowAt

ContextMenu.Hide

ContextMenu.Items

Samples

Basic ContextMenu with Standard Items

ContextMenu with Submenus

See also