The menu works connected with the layout and you can find the source codes in src/components/layout/menu folder.
1+-- components
2 |
3 +-- charts
4 +-- data-grid
5 +-- layout
6 | |
7 | +-- containers
8 | +-- menu // Menu source codes
9 | | |
10 | | |-- left-menu.tsx // Left primary and secondary source
11 | | |-- menu-backdrop.tsx // Custom click away area of the menu
12 | | |-- primary-item.tsx // Primary menu item
13 | | |-- secondary-item.tsx // Secondary menu item
14 | | |
15 | +-- notifications
16 | +-- search
17 | +-- shortcuts
18 | +-- user
19 | |-- layout-context.tsx
20 | |-- listing-page-content.tsx
21 +-- logo
22 +-- pluginsThe left menu gets a list of menu items and navigates to them. The menu items can contain hrefs, labels, and icons. If there is a children array, the menu displays an accordion on the secondary panel. The menu data file is located in src/menu-items.tsx. It has two arrays and they provide the data for the top and bottom left menu contents.
1export const leftMenuItems: MenuItem[] = [
2{
3 id: "dashboards",
4 icon: "NiHome",
5 label: "menu-dashboards",
6 description: "menu-dashboards-description",
7 color: "text-primary",
8 href: "/dashboards",
9 children: [
10 {
11 id: "default",
12 icon: "NiDashboard",
13 label: "menu-default",
14 href: "/dashboards/default",
15 description: "menu-default-description",
16 },
17 {
18 id: "analytics",
19 icon: "NiChartPie",
20 label: "menu-analytics",
21 href: "/dashboards/analytics",
22 description: "menu-analytics-description",
23 },
24 {
25 id: "visual",
26 icon: "NiPresentation",
27 label: "menu-visual",
28 href: "/dashboards/visual",
29 description: "menu-visual-description",
30 },
31 ],
32},
33...Use content property of the MenuItem to supply a component to be used as a custom menu.
1{
2 id: "ai-chat",
3 icon: "NiMessages",
4 label: "menu-ai-chat",
5 href: "/applications/ai-chat",
6 content: <AiChatMenuContent />,
7 children: [
8 ...
9 ],
10},The right menu works similarly to the left one but instead of getting routing data and displaying links, it displays components based on an array. You can find the array insrc/components/layout/menu/right-menu.tsx.
1const menuItems: MenuItem[] = [
2 {
3 id: "theme-customization",
4 label: "menu-theme-customization",
5 icon: "NiPalette",
6 content: <ThemeContent />,
7 color: "accent-1",
8 },
9 {
10 id: "background-customization",
11 label: "menu-background-customization",
12 icon: "NiPaintRoller",
13 content: <BackgroundContent />,
14 color: "accent-2",
15 },
16];1import Link from "next/link";
2
3import { Box } from "@mui/material";
4
5export default function Page() {
6 return (
7 <Box className="flex flex-col">
8 <Link href="/ui/navigation/link" className="link-primary">
9 Link
10 </Link>
11 <Link href="https://themeforest.net" target="_blank" className="link-primary">
12 MUI
13 </Link>
14 </Box>
15 );
16}1"use client";
2import { useRouter } from "next/navigation";
3import { useEffect } from "react";
4
5export default function Page() {
6 const router = useRouter();
7
8 useEffect(() => {
9 router.push("/docs/getting-started/installation");
10 }, [router]);
11 return <></>;
12}