Mario Brusarosco

ui menu for applications

In the ground since Tue Oct 05 2021

Last watered inTue Oct 05 2021

Related Topics

UI - Menu for Applications

Splitting the Menu in Primary and Secondary Items

When we have a menu with a lot of items, it's a good idea to split them into primary and secondary items. The primary items are the most important ones, and the secondary items are the less important ones. Primary will always appear. Secondary will appear only when the user clicks on a button to show them. This is highly recommended for mobile applications.

1const primaryMenuItems = [
2  {
3    title: "Dashboard",
4    path: "/dashboard",
5    icon: <Icon name="" />,
6  },
7  {
8    title: "Tables",
9    path: "/tables",
10    icon: <Icon name="" />,
11  },
12  {
13    title: "Games",
14    path: "/games",
15    icon: <Icon name="" />,
16  },
17];
18
19const renderPrimarymenutems = () => {
20  return primaryMenuItems.map((item) => (
21    <MenuItem className="flex gap-x-6">
22      {item.icon}
23      <span>{item.title}</span>
24    </MenuItem>
25  ));
26};
27
28const secondaryMenuItems = [
29  {
30    title: "Stats",
31    path: "/stats",
32    icon: <Icon name="" />,
33  },
34  {
35    title: "Account",
36    path: "/account",
37    icon: <Icon name="" />,
38  },
39];
40
41const renderSecondaryMenutems = () => {
42  return secondaryMenuItems.map((item) => (
43    <MenuItem className="flex-row gap-x-6">
44      {item.icon}
45      <span>{item.title}</span>
46    </MenuItem>
47  ));
48};
49
50// ... rendering...
51return (
52  <div>
53    <div>
54      {renderPrimarymenutems()}
55    </div>
56
57    <span className="separator" />
58
59    <button onClick={...}>more items</button>
60    <div>
61      {renderSecondaryMenutems()}
62    </div>
63  </div>
64)