|
1 | 1 | [id='proc-customize-rhdh-sidebar-menuitems_{context}'] |
2 | 2 | = Customizing the sidebar menu items for your {product-short} instance |
3 | 3 |
|
4 | | -To customize the main menu items, complete the following steps: |
| 4 | +Customize the main menu items using the following steps: |
5 | 5 |
|
6 | 6 | .Procedure |
7 | 7 | . Open the `{my-app-config-file}` file. |
8 | | - |
9 | | -. Customize the main menu items using the following steps: |
10 | | -.. Open the `{my-app-config-file}` file. |
11 | 8 | .. To customize the order and parent-child relationships for the main menu items, use the `dynamicPlugins.frontend.default.main-menu-items.menuItems` field. |
12 | 9 | .. For dynamic plugin menu items, use the `dynamicPlugins.frontend.<package_name>.menuItems` field. |
13 | 10 |
|
@@ -46,125 +43,4 @@ dynamicPlugins: |
46 | 43 | icon: add |
47 | 44 | to: create |
48 | 45 | priority: 50 |
49 | | ----- |
50 | | - |
51 | | -.Procedure |
52 | | - |
53 | | -. To configure a dynamic plugin menu item, update the `menuItems` section of your _<plugin_name>_ plugin to your `{my-app-config-file}` file. For example: |
54 | | -+ |
55 | | -[source,yaml] |
56 | | ----- |
57 | | -dynamicPlugins: |
58 | | - frontend: |
59 | | - _<plugin_name>_: # <1> |
60 | | - menuItems: |
61 | | - <menu_item_name>: # <2> |
62 | | - icon: # home | group | category | extension | school | _<my_icon>_ # <3> |
63 | | - title: _<plugin_page_title>_ # <4> |
64 | | - priority: 10 # <5> |
65 | | - parent: favorites # <6> |
66 | | ----- |
67 | | -<1> `_<plugin_name>_`: Enter the plugin name. This name is the same as the `scalprum.name` key in the `package.json` file. |
68 | | -<2> `_<menu_item_name>_`: Enter a unique name in the main sidebar navigation for either a standalone menu item or a parent menu item. If this field specifies a plugin menu item, the name of the menu item must match the name using in the corresponding path in `dynamicRoutes`. For example, if `dynamicRoutes` defines `path: /my-plugin`, then `menu_item_name` must be defined as `my-plugin`. |
69 | | -<3> `icon`: (Optional) Enter the icon name. You can use any of the following icons: |
70 | | - * Default icons, such as `home`, `group`, `category`, `extension`, and `school`. To use default icons, set the icon as an (`" "`) empty string. |
71 | | - * A custom icon, where _<my_icon>_ specifies the name of your custom icon |
72 | | - * An SVG icon, such as: `icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">...</svg>` |
73 | | - * An HTML image, such as: `icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png` |
74 | | -<4> `title`: (Optional) Enter the menu item title. Omit it when the title is already specified in the `dynamicRoutes` configuration under `menuItem.text`. To hide the title from the sidebar, set the title as an (`" "`) empty string. |
75 | | -// Update <4> for release 1.6 as this option (currently a workaround) would be added as a functionality. RHIDP-6333. |
76 | | -<5> `priority`: (Optional) Sets the order in which menu items appear in the sidebar. The default priority is 0, which places the item at the bottom of the list. A higher priority value places the item higher in the sidebar. You can define this field for each section. |
77 | | -<6> `parent`: (Optional) Enter the parent menu item under which the current item is nested. If this field is used, the parent menu item must be defined elsewhere in the `menuItems` configuration of any enabled plugin. You can define this field for each section. |
78 | | - |
79 | | -+ |
80 | | -.Example `menuItems` configuration |
81 | | -[source,yaml,subs="+attributes"] |
82 | | ----- |
83 | | -dynamicPlugins: |
84 | | - frontend: |
85 | | - _<package_name>_: |
86 | | - dynamicRoutes: |
87 | | - - path: /my-plugin |
88 | | - module: CustomModule |
89 | | - importName: FooPluginPage |
90 | | - menuItem: |
91 | | - icon: fooIcon |
92 | | - text: Foo Plugin Page |
93 | | - menuItems: |
94 | | - my-plugin: # <1> |
95 | | - priority: 10 # <2> |
96 | | - parent: favorites # <3> |
97 | | - favorites: # <4> |
98 | | - icon: favorite # <5> |
99 | | - title: Favorites # <6> |
100 | | - priority: 100 # <7> |
101 | | ----- |
102 | | -<1> `my-plugin`: Matches the value of the `path` field in `dynamicRoutes`. |
103 | | -<2> `priority`: Controls order of plugins under the parent menu item. |
104 | | -<3> `parent`: Nests this plugin under the `favorites` parent menu item. |
105 | | -<4> `favorites`: Configuration for the parent menu item. |
106 | | -<5> `icon`: Displays the `favorite` icon from the {product-very-short} system icons. |
107 | | -<6> `title`: Displays the title name for the parent menu item. |
108 | | -<7> `priority`: Order of the `favourites` menu item in the sidebar. |
109 | | - |
110 | | - |
111 | | -. To modify a main menu item or add a custom menu item, add a section to the `default.main-menu-items` > `menuItems` section in your `{my-app-config-file}` file. Use the `default.` prefix to identify the key as a main menu item. |
112 | | -+ |
113 | | -[source,yaml] |
114 | | ----- |
115 | | -dynamicPlugins: |
116 | | - frontend: |
117 | | - default.main-menu-items: |
118 | | - menuItems: |
119 | | - default._<menu_group_parent_item_name>_: # <1> |
120 | | - icon: # home | group | category | extension | school | _<my_icon>_ # <2> |
121 | | - title: _<menu_group_parent_title>_ # <3> |
122 | | - priority: 10 # <4> |
123 | | - default._<menu_item_name>_: # <5> |
124 | | - parent: _<menu_group_parent_item_name>_ # <6> |
125 | | - icon: # home | group | category | extension | school | _<my_icon>_ # <7> |
126 | | - title: _<my_menu_title>_ # <8> |
127 | | - to: _<path_to_the_menu_target_page>_ # <9> |
128 | | - priority: 100 # <10> |
129 | | ----- |
130 | | -<1> `default._<menu_group_parent_item_name>_`: (Optional) Enter the menu group parent item name to configure static main menu items. If no `default._<menu_item_name>_` has a `parent` value set, this field is not needed. |
131 | | -<2> `icon`: Enter the menu icon. Required for parent menu items. |
132 | | -<3> `title`: Enter the menu group title. Required for parent menu items. |
133 | | -<4> `priority`: (Optional) Enter the order of this menu item within its menu level. |
134 | | -<5> `default._<menu_item_name>_`: Enter the menu item name for which you want to override the default value. Add the `default.` prefix to identify a main menu item. |
135 | | -<6> `parent`: (Optional) Enter the parent menu item for this item. Required if <menu_item_name> is specified as the child of any menu items. |
136 | | -<7> `icon`: (Optional) Enter the menu icon. To use the default icon, set the icon as an (`" "`) empty string. |
137 | | -<8> `title`: (Optional) Enter the menu group title. Only required for adding a new custom main menu item. To hide a default main menu item title from the sidebar, set the title as an (`" "`) empty string. |
138 | | -// Update <8> for release 1.6 as this option (currently a workaround) would be added as a functionality. RHIDP-6333. |
139 | | -<9> `to`: (Optional) Enter the path that the menu item navigates to. If it is not set, it defaults to the home page. |
140 | | -<10> `priority`: (Optional) Enter the order of this menu item within its menu level. |
141 | | - |
142 | | -+ |
143 | | -.Example `mainItems` configuration |
144 | | -[source,yaml] |
145 | | ----- |
146 | | -default.main-menu-items: |
147 | | - menuItems: |
148 | | - default.catalog: |
149 | | - icon: category # <1> |
150 | | - title: My Catalog |
151 | | - priority: 5 |
152 | | - default.learning-path: |
153 | | - title: '' # <2> |
154 | | - default.parentlist: # <3> |
155 | | - title: Overview |
156 | | - icon: bookmarks |
157 | | - default.home: |
158 | | - parent: default.parentlist # <4> |
159 | | - default.references: |
160 | | - title: References # <5> |
161 | | - icon: school # <6> |
162 | | - to: /references # <7> |
163 | | ----- |
164 | | -<1> `icon`: Specifies if you want to change the icon default menu item for the catalog. |
165 | | -<2> `title`: Specifies an empty string `" "` to hide the learning path from the default sidebar. |
166 | | -<3> `default.parentlist`: Introduces the parent menu item. |
167 | | -<4> `parent`: Nests home menu under the `default.parentlist` parent menu item. |
168 | | -<5> `title`: Specifies a name for `default.references` |
169 | | -<6> `icon`: Displays the `school` icon. |
170 | | -<7> `to`: Redirects `default.references` to the `/references` page. |
| 46 | +---- |
0 commit comments