Routing and Menu

Menu Source

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    +-- plugins

Left Menu

The 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...

Custom Menu Content

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},

Navigating via Next Link

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}

Navigating via Next Router

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}