Menu Frame

LyteNyte Grid offers a component-based menu system to display lists of items. The grid uses menus in several contexts:

• The generic menu frame API that displays arbitrary grid-related menus.
• The column menu for specific column operations. See our dedicated column menu guide for details.
• The context menu for grid-specific context operations. See our dedicated context menu guide for details.

This guide covers the generic Menu Frame functionality and the Menu components available in the LyteNyte Grid package.

Grid Menu Frame

LyteNyte Grid allows you to display menus at any position. To use this functionality, follow these two steps:

1. Register your menu on the menuFrames property of the grid.
2. Call grid.api.menuFrameOpen to display your menu.

Here's a basic example:

TODO;

Menu Components

Import the menu components using:

import { Menu } from "@1771technologies/lytenyte-pro/menu";

The basic structure of a menu frame looks like this:

<Menu.Positioner>
  <Menu.Container>
    <Menu.Item />
    <Menu.Separator />
    <Menu.Group>
      <Menu.GroupLabel />
    </Menu.Group>
    <Menu.RadioGroup>
      <Menu.RadioItem />
    </Menu.RadioGroup>
    <Menu.CheckboxItem />
  </Menu.Container>
</Menu.Positioner>

Every LyteNyte Grid menu starts with two main components:

• Menu.Positioner - Positions the menu relative to an anchor target.
• Menu.Container - Contains the menu items and provides necessary event listeners for accessibility.

Menu Positioner

The Menu.Positioner places menu content relative to an anchor point. Its main property, side, determines the menu's position relative to the anchor. The default value is bottom-start, but you can use other values like top or left-end. The sideOffset property creates space between the menu and its anchor.

TODO;

Menu Container

The Menu.Container holds the menu content and provides listeners for accessible interactions. Always render menu items within a menu container. Apply styling for the menu to the Menu.Container component.

Menu Item

The Menu.Item component serves as the standard menu item for click interactions. It closes the menu on click, but you can prevent this by setting closeOnClick to false. Provide an onClick handler for the functionality to execute when a user clicks the menu item.

Menu Checkbox

The Menu.Checkbox component renders a checkbox item for toggling behaviors. By default, clicking a checkbox item doesn't close the menu, but you can change this by setting closeOnClick to true.

The Menu.CheckboxIndicator component displays the checkbox indicator. A basic checkbox item typically looks like this:

<Menu.CheckboxItem>
  My Item <Menu.CheckboxIndicator />
</Menu.CheckboxItem>

You can apply additional styling and decoration as needed.

Menu Radio Items

The Menu.Radio component renders a radio item in the menu. Always render it as a child of a Menu.RadioGroup component. Use Menu.RadioIndicator to display the selection indicator. By default, selecting a radio item doesn't close the menu, but you can change this behavior with the closeOnClick property.

The basic structure looks like this:

<Menu.RadioGroup>
  <Menu.Radio>
    Justify Right <Menu.RadioIndicator />
  </Menu.Radio>
  <Menu.Radio>
    Justify Center <Menu.RadioIndicator />
  </Menu.Radio>
  <Menu.Radio>
    Justify Left <Menu.RadioIndicator />
  </Menu.Radio>
</Menu.RadioGroup>

Menu Group and Menu Group Label

The Menu.Group component groups related menu items together. It renders a div to contain the items. Use the Menu.GroupLabel component to label the group. Here's a basic structure:

<MenuGroup>
  <MenuGroupLabel>Export</MenuGroupLabel>
 
  <MenuItem>CSX Export</MenuItem>
  <MenuItem>Excel Export</MenuItem>
  <MenuItem>PDF Export</MenuItem>
</MenuGroup>

Nested Menu

The Menu.Submenu component displays a nested menu. Provide a Menu.SubmenuTrigger component to the required trigger property. The first child of Menu.Submenu must be a Menu.SubmenuPositioner, which works like the normal Menu.Positioner but anchors the submenu to the trigger.

Here's the basic structure:

<Menu.Submenu trigger={<Menu.SubmenuTrigger />}>
  <Menu.SubmenuPositioner>
    <Menu.Container>
      <Menu.Item />
      <Menu.Item />
      <Menu.Item />
      <Menu.Item />
    </Menu.Container>
  </Menu.SubmenuPositioner>
</Menu.Submenu>

Important Considerations

The menu components are tied to LyteNyte Grid. Each grid instance can have its own set of components. Each LyteNyte Grid instance contains a menu driver that handles mounting and unmounting menu components.