Pages UI
Search…
v5.0.1 - Pages Angular
Directives
Forms
Service
Menu Items
pg-menu-items
Importing
First import it to your app module or any submodule as you wish
1
import { SharedModule } from './@pages/components/shared.module';
2
@NgModule({
3
imports: [SharedModule,...]
4
})
5
export class AppModule(){}
Copied!
How to use
HTML
Typescript
1
<pg-menu-items [Items]="menuLinks">
2
</pg-menu-items>
Copied!
1
menuLinks = [
2
{
3
label:"Dashboard",
4
details:"12 New Updates",
5
routerLink:"/",
6
iconType:"pg",
7
iconName:"home",
8
thumbNailClass:"bg-success"
9
},
10
{
11
label:"Email",
12
details:"234 New Emails",
13
routerLink:"email/list",
14
iconType:"pg",
15
iconName:"mail"
16
},
17
{
18
label:"Social",
19
routerLink:"social",
20
iconType:"pg",
21
iconName:"social"
22
},
23
{
24
label:"Builder",
25
routerLink:"builder",
26
iconType:"pg",
27
iconName:"layouts"
28
},
29
{
30
label:"Layouts",
31
iconType:"pg",
32
iconName:"layouts2",
33
toggle:"close",
34
submenu:[
35
{
36
label:"Default",
37
routerLink:"layouts/default",
38
iconType:"letter",
39
iconName:"dl",
40
},
41
{
42
label:"Secondary",
43
routerLink:"layouts/secondary",
44
iconType:"letter",
45
iconName:"sl",
46
},
47
{
48
label:"Boxed",
49
routerLink:"layouts/boxed",
50
iconType:"letter",
51
iconName:"bl",
52
}
53
]
54
},
55
{
56
label:"UI Elements",
57
iconType:"letter",
58
iconName:"Ui",
59
toggle:"close",
60
submenu:[
61
{
62
label:"Color",
63
routerLink:"ui/buttons",
64
iconType:"letter",
65
iconName:"c",
66
},
67
{
68
label:"Typography",
69
routerLink:"ui/typography",
70
iconType:"letter",
71
iconName:"t",
72
},
73
{
74
label:"Icons",
75
routerLink:"ui/icons",
76
iconType:"letter",
77
iconName:"i",
78
},
79
{
80
label:"Buttons",
81
routerLink:"ui/buttons",
82
iconType:"letter",
83
iconName:"b",
84
},
85
{
86
label:"Notifications",
87
routerLink:"ui/notifications",
88
iconType:"letter",
89
iconName:"n",
90
},
91
{
92
label:"Progress & Activity",
93
routerLink:"ui/progress",
94
iconType:"letter",
95
iconName:"pa",
96
},
97
{
98
label:"Tabs & Accordians",
99
routerLink:"ui/tabs",
100
iconType:"letter",
101
iconName:"a",
102
},
103
{
104
label:"Sliders",
105
routerLink:"ui/sliders",
106
iconType:"letter",
107
iconName:"s",
108
},
109
{
110
label:"Treeview",
111
routerLink:"ui/tree",
112
iconType:"letter",
113
iconName:"tv",
114
}
115
]
116
},
117
{
118
label:"Forms",
119
iconType:"pg",
120
iconName:"form",
121
toggle:"close",
122
submenu:[
123
{
124
label:"Form Elements",
125
routerLink:"forms/elements",
126
iconType:"letter",
127
iconName:"fe",
128
},
129
{
130
label:"Form Layouts",
131
routerLink:"forms/layouts",
132
iconType:"letter",
133
iconName:"fl",
134
},
135
{
136
label:"Form Wizard",
137
routerLink:"forms/wizard",
138
iconType:"letter",
139
iconName:"fq",
140
}
141
]
142
},
143
{
144
label:"Cards",
145
routerLink:"cards",
146
iconType:"pg",
147
iconName:"grid"
148
},
149
{
150
label:"Views",
151
routerLink:"views",
152
iconType:"pg",
153
iconName:"ui"
154
},
155
{
156
label:"Tables",
157
iconType:"pg",
158
iconName:"tables",
159
toggle:"close",
160
submenu:[
161
{
162
label:"Basic Tables",
163
routerLink:"tables/basic",
164
iconType:"letter",
165
iconName:"bt",
166
},
167
{
168
label:"Advance Tables",
169
routerLink:"tables/advance",
170
iconType:"letter",
171
iconName:"dt",
172
}
173
]
174
},
175
{
176
label:"Maps",
177
iconType:"pg",
178
iconName:"map",
179
toggle:"close",
180
submenu:[
181
{
182
label:"Google Maps",
183
routerLink:"tables/basic",
184
iconType:"letter",
185
iconName:"gm",
186
},
187
{
188
label:"Vector Maps",
189
routerLink:"tables/data",
190
iconType:"letter",
191
iconName:"vm",
192
}
193
]
194
},
195
{
196
label:"Charts",
197
routerLink:"charts",
198
iconType:"pg",
199
iconName:"charts"
200
},
201
{
202
label:"Extra",
203
iconType:"pg",
204
iconName:"bag",
205
toggle:"close",
206
submenu:[
207
{
208
label:"Invoice",
209
routerLink:"extra/invoice",
210
iconType:"letter",
211
iconName:"in",
212
},
213
{
214
label:"404 Page",
215
routerLink:"tables/data",
216
iconType:"letter",
217
iconName:"pg",
218
},
219
{
220
label:"500 Page",
221
routerLink:"tables/data",
222
iconType:"letter",
223
iconName:"pg",
224
},
225
{
226
label:"Login",
227
routerLink:"session/login",
228
iconType:"letter",
229
iconName:"l",
230
},
231
{
232
label:"Register",
233
routerLink:"session/register",
234
iconType:"letter",
235
iconName:"re",
236
},
237
{
238
label:"Lockscreen",
239
routerLink:"session/lock",
240
iconType:"letter",
241
iconName:"ls",
242
},
243
{
244
label:"Gallery",
245
routerLink:"extra/gallery",
246
iconType:"letter",
247
iconName:"gl",
248
},
249
{
250
label:"Timeline",
251
routerLink:"extra/timeline",
252
iconType:"letter",
253
iconName:"t",
254
}
255
]
256
},
257
{
258
label:"Docs",
259
routerLink:"http://pages.revox.io/dashboard/2.2.0/docs/",
260
targe:"_blank",
261
iconType:"pg",
262
iconName:"note"
263
},
264
{
265
label:"Changelog",
266
externalLink:"http://changelog.pages.revox.io/",
267
targe:"_blank",
268
iconType:"letter",
269
iconName:"Cl"
270
},
271
];
Copied!
Menu Items Structure
Label
Description
Type
Example
label
Name of the menu item that appears
string
Dashboard
details
Sub Text that is shown below the label
string
2 Unread
routerLink
Route link path
string
/ui/buttons
iconType
Icon type - Font awesome, Pages Icons, Feather & also supports Letter
string
pg, fe, letter, material
iconName
The class name of the icon or abbreviation letters
string
pg-user
toggle
Sub menu close or open : "close", "open"
string
close / open
externalLink
Used for connecting to another URL
string
http://example.com
target
Used with "externalLink" to open in a new window / tab
string
_blank
submenu
Sub menu items
array[]:string
​
Last modified 2yr ago
Copy link