Navigation menu

Edit src/configs/navigation.config.ts to change the links, labels and groups shown in your app's navigation. Menu links point to existing pages; use Create your own page when adding a new destination.

The snippets use sample page and group names. Replace their labels, URLs and keys with your own.

Edit menu links

The main menu is the navigationConfig array. Add a link inside that array, or change an existing item:

{
  key: 'reports',
  path: '/reports',
  title: 'Reports',
  icon: 'reports',
  type: 'item',
},

The fields describe the link's identity, destination and appearance:

For a link outside your app, use its full URL in path.

• To rename a link, change title.
• To change its position, move the item within the array.
• To hide it from navigation, remove the item. Its page remains available at its URL.

Keep existing // nateui:... comments. When moving a CLI-added entry, move its surrounding comment block with it.

Match the active link

The app identifies the current page through src/configs/routes.config.ts. Its route entry and menu item need the same key for the menu link to be marked as active.

For the example above, the corresponding entry inside protectedRoutes is:

'/reports': {
  key: 'reports',
  authority: [],
},

The URL and key have different jobs: path opens the page, while the matching key connects it to its menu item. Changing a label does not require changing either value.

Groups and external links still need unique keys, but do not need their own app route entries.

Group related links

Move related items into a parent's subMenu array. Use type: 'collapse' for an expandable group:

{
  key: 'workspace',
  path: '',
  title: 'Workspace',
  icon: 'workspace',
  type: 'collapse',
  subMenu: [
    {
      key: 'reports',
      path: '/reports',
      title: 'Reports',
      icon: 'reports',
      type: 'item',
    },
  ],
},

If you already added the standalone item, move it into the group rather than keeping another copy with the same key.

Use type: 'title' for a labeled section containing child items. Leave a non-link group's path empty. Group presentation follows the template's layout; a stacked sidebar can show its children in a separate panel.

Grouping links changes their position in the menu. Each child still opens its own path; you do not need to move its page files.

Choose icons

Icon names are mapped in src/configs/navigation-icon.config.tsx. Reuse an existing name, or import an icon and give it a new map entry.

To define the names used in the examples, merge these imports with the file's existing imports:

import { PiFileText, PiFolderSimple } from 'react-icons/pi'

Add these entries inside the existing navigationIcon object, keeping the other entries and CLI comments:

reports: <PiFileText className="text-xl" />,
workspace: <PiFolderSimple className="text-xl" />,

The menu's icon value uses the map name, such as workspace, rather than the React component name.

Main and secondary links

Use navigationConfig for the main menu. To maintain a separate set of links, add items with the same structure to secondaryNavigationConfig in the same file.

CRM and Project Management show secondary links near the bottom of the desktop sidebar. Mobile menus show them after the main links. The current AI Chat and Sales & Inventory desktop layouts do not render that secondary tree.

See Layouts when changing where a menu is displayed.

Menus from your server

If menu links come from your backend or differ by user, load or filter them in src/actions/getNavigation.ts. Return navigationTree and secondaryNavigationTree, using the same item structure shown above.

Filtering menu items controls which links are visible. Protect the routes and their data separately, as described in Auth.