Components

Menu Button

Use the Menu component to display a dropdown list of user actions.

LyteNyte Grid exports the Menu component as a general-purpose dropdown list of actions. The Menu component supports nested lists, grouped items, and checkbox items.

The Menu component is headless and is composed of multiple parts that must be used together. The code block below shows these parts assembled:

1
<Menu>
2
  <Menu.Trigger />
3

4
  <Menu.Popover>
5
    <Menu.Arrow />
6
    <Menu.Container>
7
      <Menu.Title className="sr-only" />
8
      <Menu.Description className="sr-only" />
9

10
      <Menu.Item />
11
      <Menu.Item />
12

13
      <Menu.Divider />
14
      <Menu.RadioGroup>
15
        <Menu.RadioItem />
16
        <Menu.RadioItem />
17
        <Menu.RadioItem />
18
      </Menu.RadioGroup>
19

20
      <Menu.Divider />
21
      <Menu.Group>
22
        <Menu.Header />
23

24
        <Menu.CheckboxItem />
25
        <Menu.CheckboxItem />
26
      </Menu.Group>
27

28
      <Menu.Submenu>
29
        <Menu.SubmenuTrigger />
30
        <Menu.SubmenuContainer>
31
          <Menu.Item />
32
          <Menu.Item />
33
        </Menu.SubmenuContainer>
34
      </Menu.Submenu>
35
    </Menu.Container>
36
  </Menu.Popover>
37
</Menu>

The demo below shows a basic example of the Menu component. It demonstrates three types of menu items:

Menu.Item: A standard menu item that performs an action when clicked.
Menu.RadioItem: An exclusive selection radio item. Must be rendered within a Menu.RadioGroup.
Menu.CheckboxItem: An inclusive selection checkbox item that can be used for toggle settings and flags.

Basic Menu Implementation

demo.tsx


7 collapsed lines
1
import { Menu } from "@1771technologies/lytenyte-pro/components";
2
import "@1771technologies/lytenyte-pro/components.css";
3
import "@1771technologies/lytenyte-pro/light-dark.css";
4
import { CheckIcon, CopyIcon, TrashIcon } from "@radix-ui/react-icons";
5
import { clsx, type ClassValue } from "clsx";
6
import { useState } from "react";
7
import { twMerge } from "tailwind-merge";
8

9
const menuClass = "grid grid-cols-[24px_1fr] gap-2 ps-[4px]";
10
const radioClass = "grid grid-cols-[24px_1fr]";
11

12
export default function ComponentDemo() {
13
  const [radioValue, setRadioValue] = useState("medium");
14
  const [smoothScroll, setSmoothScroll] = useState(false);
15
  const [notify, setNotify] = useState(true);
16
  return (
17
    <div style={{ height: "400px" }} className="ln-grid flex justify-center pt-8">
18
      <Menu>
19
        <Menu.Trigger data-ln-button="website" data-ln-size="md" className="min-w-45">
20
          Show Menu Items
21
        </Menu.Trigger>
22
        <Menu.Popover>
23
          <Menu.Arrow />
24
          <Menu.Container className="min-w-45">
25
            <Menu.Title className="sr-only">Example Menu</Menu.Title>
26
            <Menu.Description className="sr-only">
27
              This is an example menu to demonstrate LyteNyte Grid's Menu component
28
            </Menu.Description>
29

30
            <Menu.Item onAction={() => {}} className={menuClass}>
31
              <div className="flex items-center justify-center">
32
                <CopyIcon />
33
              </div>
34
              <div>Copy Content</div>
35
            </Menu.Item>
36
            <Menu.Item onAction={() => {}} className={menuClass}>
37
              <div className="flex items-center justify-center">
38
                <TrashIcon />
39
              </div>
40
              <div>Delete Row</div>
41
            </Menu.Item>
42

43
            <Menu.Divider />
44
            <Menu.Header className="px-2 py-1 text-xs font-medium">Row Height</Menu.Header>
45
            <Menu.RadioGroup value={radioValue} onChange={setRadioValue}>
46
              <Menu.RadioItem className={radioClass} value="small">
47
                <RadioCircle checked={radioValue === "small"} />
48
                <div>Small</div>
49
              </Menu.RadioItem>
50
              <Menu.RadioItem className={radioClass} value="medium">
51
                <RadioCircle checked={radioValue === "medium"} />
52
                <div>Medium</div>
53
              </Menu.RadioItem>
54
              <Menu.RadioItem className={radioClass} value="large">
55
                <RadioCircle checked={radioValue === "large"} />
56
                <div>Large</div>
57
              </Menu.RadioItem>
58
            </Menu.RadioGroup>
59
            <Menu.Divider />
60
            <Menu.Group>
61
              <Menu.CheckboxItem
62
                checked={notify}
63
                className={radioClass}
64
                onClick={() => setNotify((prev) => !prev)}
65
              >
66
                <Checkbox checked={notify} />
67
                <div>Notify On Error</div>
68
              </Menu.CheckboxItem>
69
              <Menu.CheckboxItem
70
                checked={smoothScroll}
71
                onClick={() => setSmoothScroll((prev) => !prev)}
72
                className={radioClass}
73
              >
74
                <Checkbox checked={smoothScroll} />
75
                <div>Smooth Scroll</div>
76
              </Menu.CheckboxItem>
77
            </Menu.Group>
78
          </Menu.Container>
79
        </Menu.Popover>
80
      </Menu>
81
    </div>
82
  );
83
}
84

85
export function tw(...c: ClassValue[]) {
86
  return twMerge(clsx(...c));
87
}
88

89
function RadioCircle({ checked }: { checked: boolean }) {
90
  return (
91
    <div className={tw("border-ln-text-xlight size-3 rounded-full border", checked && "bg-ln-primary-50")} />
92
  );
93
}
94

95
function Checkbox({ checked }: { checked: boolean }) {
96
  return (
97
    <div
98
      className={tw(
99
        "border-ln-border-xstrong rounded-xs flex size-3 items-center justify-center border",
100
        checked && "bg-ln-primary-50",
101
      )}
102
    >
103
      {checked && <CheckIcon className="size-3 text-white" />}
104
    </div>
105
  );
106
}

Basic Submenu

Use the Menu.Submenu component to group related menu items into an expandable list of options. The demo below shows a submenu in action.

Basic Submenu

demo.tsx


14 collapsed lines
1
import { Menu } from "@1771technologies/lytenyte-pro/components";
2
import "@1771technologies/lytenyte-pro/components.css";
3
import "@1771technologies/lytenyte-pro/light-dark.css";
4
import {
5
  CheckIcon,
6
  ChevronRightIcon,
7
  CodeIcon,
8
  CopyIcon,
9
  RowSpacingIcon,
10
  TrashIcon,
11
} from "@radix-ui/react-icons";
12
import { clsx, type ClassValue } from "clsx";
13
import { useState } from "react";
14
import { twMerge } from "tailwind-merge";
15

16
const menuClass = "grid grid-cols-[24px_1fr] gap-1 ps-[4px]";
17
const radioClass = "grid grid-cols-[24px_1fr] gap-1";
18

19
export default function ComponentDemo() {
20
  const [radioValue, setRadioValue] = useState("medium");
21
  const [smoothScroll, setSmoothScroll] = useState(false);
22
  const [notify, setNotify] = useState(true);
23
  return (
24
    <div style={{ height: "400px" }} className="ln-grid flex justify-center pt-8">
25
      <Menu>
26
        <Menu.Trigger data-ln-button="website" data-ln-size="md" className="min-w-45">
27
          Show Menu Items
28
        </Menu.Trigger>
29
        <Menu.Popover>
30
          <Menu.Arrow />
31
          <Menu.Container className="min-w-45">
32
            <Menu.Title className="sr-only">Example Menu</Menu.Title>
33
            <Menu.Description className="sr-only">
34
              This is an example menu to demonstrate LyteNyte Grid's Menu component
35
            </Menu.Description>
36

37
            <Menu.Item onAction={() => {}} className={menuClass}>
38
              <div className="flex items-center justify-center">
39
                <CopyIcon />
40
              </div>
41
              <div>Copy Content</div>
42
            </Menu.Item>
43
            <Menu.Item onAction={() => {}} className={menuClass}>
44
              <div className="flex items-center justify-center">
45
                <TrashIcon />
46
              </div>
47
              <div>Delete Row</div>
48
            </Menu.Item>
49
            <Menu.Divider />
50

51
            <Menu.Submenu>
52
              <Menu.SubmenuTrigger className="grid grid-cols-[24px_100px_20px] items-center justify-between">
53
                <div>
54
                  <RowSpacingIcon />
55
                </div>
56
                <div>Row Height</div>
57
                <div>
58
                  <ChevronRightIcon />
59
                </div>
60
              </Menu.SubmenuTrigger>
61
              <Menu.SubmenuContainer>
62
                <Menu.RadioGroup value={radioValue} onChange={setRadioValue}>
63
                  <Menu.RadioItem className={radioClass} value="small">
64
                    <RadioCircle checked={radioValue === "small"} />
65
                    <div>Small</div>
66
                  </Menu.RadioItem>
67
                  <Menu.RadioItem className={radioClass} value="medium">
68
                    <RadioCircle checked={radioValue === "medium"} />
69
                    <div>Medium</div>
70
                  </Menu.RadioItem>
71
                  <Menu.RadioItem className={radioClass} value="large">
72
                    <RadioCircle checked={radioValue === "large"} />
73
                    <div>Large</div>
74
                  </Menu.RadioItem>
75
                </Menu.RadioGroup>
76
              </Menu.SubmenuContainer>
77
            </Menu.Submenu>
78

79
            <Menu.Submenu>
80
              <Menu.SubmenuTrigger className="grid grid-cols-[24px_100px_20px] items-center justify-between">
81
                <div>
82
                  <CodeIcon />
83
                </div>
84
                <div>Settings</div>
85
                <div>
86
                  <ChevronRightIcon />
87
                </div>
88
              </Menu.SubmenuTrigger>
89
              <Menu.SubmenuContainer>
90
                <Menu.Group>
91
                  <Menu.CheckboxItem
92
                    checked={notify}
93
                    className={radioClass}
94
                    onClick={() => setNotify((prev) => !prev)}
95
                  >
96
                    <Checkbox checked={notify} />
97
                    <div>Notify On Error</div>
98
                  </Menu.CheckboxItem>
99
                  <Menu.CheckboxItem
100
                    checked={smoothScroll}
101
                    onClick={() => setSmoothScroll((prev) => !prev)}
102
                    className={radioClass}
103
                  >
104
                    <Checkbox checked={smoothScroll} />
105
                    <div>Smooth Scroll</div>
106
                  </Menu.CheckboxItem>
107
                </Menu.Group>
108
              </Menu.SubmenuContainer>
109
            </Menu.Submenu>
110
          </Menu.Container>
111
        </Menu.Popover>
112
      </Menu>
113
    </div>
114
  );
115
}
116

117
export function tw(...c: ClassValue[]) {
118
  return twMerge(clsx(...c));
119
}
120

121
function RadioCircle({ checked }: { checked: boolean }) {
122
  return (
123
    <div className={tw("border-ln-text-xlight size-3 rounded-full border", checked && "bg-ln-primary-50")} />
124
  );
125
}
126

127
function Checkbox({ checked }: { checked: boolean }) {
128
  return (
129
    <div
130
      className={tw(
131
        "border-ln-border-xstrong rounded-xs flex size-3 items-center justify-center border",
132
        checked && "bg-ln-primary-50",
133
      )}
134
    >
135
      {checked && <CheckIcon className="size-3 text-white" />}
136
    </div>
137
  );
138
}

All Menu component parts accept standard HTML element properties. The properties list below describes the additional properties provided by the Menu components.

Menu extends the popover component with additional logic for dropdown menus, inheriting its foundational properties.

Popover: Display anchored, on-demand content in an overlay.
Pill Manager: Create and manage grid interactions using label pills.
Context Menu: Display a context-aware menu for grid actions.

Menu Button

Menu Anatomy

Basic Menu

Basic Menu Implementation

Basic Submenu

Basic Submenu

Menu Properties

Menu

Menu.Item

Menu.CheckboxItem

Menu.Arrow

Menu.RadioGroup

Menu.RadioItem

Menu.Submenu

Menu.SubmenuTrigger

Next Steps

On this page