Components

Menu Button

A menu button displays a list of actions when the user presses the button.

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.


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">
20
          Show Menu Items
21
        </Menu.Trigger>
22
        <Menu.Popover>
23
          <Menu.Arrow />
24
          <Menu.Container>
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
}

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

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">
27
          Show Menu Items
28
        </Menu.Trigger>
29
        <Menu.Popover>
30
          <Menu.Arrow />
31
          <Menu.Container>
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
}

Popover: Display additional content in a popover.
Pill Manager: Create and manage grid interactions using label pills.
Context Menu: Display a menu for actions in the grid with contextual information.

Menu Button

Menu Anatomy

Basic Menu

Menu

Submenu Menu

Submenu

Properties

Menu

Menu.Item

Menu.CheckboxItem

Menu.Arrow

Menu.RadioGroup

Menu.RadioItem

Menu.Submenu

Menu.SubmenuTrigger

Next Steps

On this page