From 9d6ccd0557b5812001cbcae05ea19e92f20408a7 Mon Sep 17 00:00:00 2001
From: masumulu28 <masum.ulu@hotmail.com>
Date: Mon, 13 Mar 2023 10:50:47 +0300
Subject: [PATCH] document task done  #15938

---
 docs/en/UI/Angular/Modifying-the-Menu.md | 38 ++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/docs/en/UI/Angular/Modifying-the-Menu.md b/docs/en/UI/Angular/Modifying-the-Menu.md
index b0a3b760fa..8278f38722 100644
--- a/docs/en/UI/Angular/Modifying-the-Menu.md
+++ b/docs/en/UI/Angular/Modifying-the-Menu.md
@@ -88,6 +88,41 @@ function configureRoutes(routes: RoutesService) {
 }
 ```
 
+Also we can define group for navigation elements. It's an optional property
+
+```js
+// route.provider.ts
+import { ABP } from '@abp/ng.core';
+
+type GroupType = ABP.Group<string>;
+
+function configureRoutes(routes: RoutesService) {
+  const myGroup: GroupType = { key:'groupKey', text:'GroupName' };
+  
+  return () => {
+    routes.add([
+      {
+        path: '/your-path',
+        name: 'Your navigation',
+        requiredPolicy: 'permission key here',
+        order: 101,
+        iconClass: 'fas fa-question-circle',
+        layout: eLayoutType.application,
+        group: myGroup
+      },
+      {
+        path: '/your-path/child',
+        name: 'Your child navigation',
+        parentName: 'Your navigation',
+        requiredPolicy: 'permission key here',
+        order: 1,
+      },
+    ]);
+  };
+}
+```
+
+
 ...and then in app.module.ts...
 
 ```js
@@ -111,6 +146,9 @@ Here is what every property works as:
 - `iconClass` is the class of the `i` tag, which is placed to the left of the navigation label.
 - `layout` defines in which layout the route will be loaded. (default: `eLayoutType.empty`)
 - `invisible` makes the item invisible in the menu. (default: `false`)
+- `group` is an optional property that is used to group together related routes in an application. It's an object and it have 2 property
+  - `key` is a generic type property that we use for gather items in same group. (default type: `string`)
+  - `text` is the display name on menu 
 
 ### Via `routes` Property in `AppRoutingModule`