diff --git a/docs/en/UI/Angular/Theming.md b/docs/en/UI/Angular/Theming.md
index 21e28953f8..16bae7aac9 100644
--- a/docs/en/UI/Angular/Theming.md
+++ b/docs/en/UI/Angular/Theming.md
@@ -204,25 +204,49 @@ constructor(private sessionState: SessionStateService) {
}
````
+
+
##### User Menu
-User menu is a component that can be replaceable. See an example to learn how can you replace it:
+`UserMenuService` is used to get the user menu's items and render on the dropdown. You can add/update/remove an item by using the service.
+
+**Example: Adding/updating/removing an user menu item**
````ts
-import { eThemeBasicComponents } from '@abp/ng.theme.basic';
-import { NavItemsService } from '@abp/ng.theme.shared';
+import { eUserMenuItems } from '@abp/ng.theme.basic';
+import { UserMenuService } from '@abp/ng.theme.shared';
import { Component } from '@angular/core';
+import { Router } from '@angular/router';
@Component({/* component metadata */})
export class AppComponent {
- constructor(private navItems: NavItemsService) {
- this.navItems.patchItem(eThemeBasicComponents.CurrentUser, { component: MyUserMenuComponent });
+ constructor(private userMenu: UserMenuService, private router: Router) {
+ this.userMenu.addItems([
+ {
+ id: 'UserMenu.Reports',
+ order: 1,
+ html: `Reports`,
+ action: () => {
+ this.router.navigateByUrl('/account/reports');
+ },
+ },
+ ]);
+
+ this.userMenu.patchItem(eUserMenuItems.MyAccount, {
+ html: `My profile`,
+ });
+
+ this.userMenu.removeItem(eUserMenuItems.Logout);
}
}
````
-[`ConfigStateService`](Config-State-Service.md) service can be used to obtain the `application-configuration` API response (e.g. getting current user or tenant).
+In the example above, added a new user menu item labeled "Reports", updated the "My account" item HTML content, and removed the "Logout" item.
+
+See the result:
+
+
#### Page Alerts
-`PageAlertService` service is used to get the current page alerts to render on the layout. See the [Page Alerts](Page-Alerts.md) document to learn more.
\ No newline at end of file
+`PageAlertService` service is used to get the current page alerts to render on the layout. See the [Page Alerts](Page-Alerts.md) document to learn more.