Pages UI
Search…
Horizontal Menu

Importing

First import it to your app module or any submodule as you wish
1
import { HorizontalMenuComponent } from './@pages/components/horizontal-menu/horizontal-menu.component';
2
@NgModule({
3
declarations : [HorizontalMenuComponent,...]
4
})
5
export class AppModule(){}
Copied!

Example Menu

HTML
Typescript
1
<pg-horizontal-menu [Items]="menuItems" HideExtra="4">
2
<ng-template #mobileSidebarFooter>
3
<a href="#" class="search-link d-flex justify-content-between align-items-center d-lg-none" (click)="openSearch($event)">Tap here to search <i class="pg pg-search float-right"></i></a>
4
</ng-template>
5
</pg-horizontal-menu>
Copied!
1
menuItems = [
2
{
3
label:"Dashboard",
4
details:"12 New Updates",
5
routerLink:"/",
6
iconType:"pg",
7
iconName:"home",
8
},
9
{
10
label:"Social",
11
routerLink:"social",
12
iconType:"pg",
13
iconName:"social"
14
},
15
{
16
label:"Builder",
17
routerLink:"layouts/with-sidebar",
18
iconType:"pg",
19
iconName:"layouts"
20
},
21
{
22
label:"UI Elements",
23
iconType:"letter",
24
iconName:"Ui",
25
toggle:"close",
26
mToggle:"close",
27
submenu:[
28
{
29
label:"Color",
30
routerLink:"ui/buttons",
31
iconType:"letter",
32
iconName:"c",
33
},
34
{
35
label:"Typography",
36
routerLink:"ui/typography",
37
iconType:"letter",
38
iconName:"t",
39
},
40
{
41
label:"Icons",
42
routerLink:"ui/icons",
43
iconType:"letter",
44
iconName:"i",
45
},
46
{
47
label:"Buttons",
48
routerLink:"ui/buttons",
49
iconType:"letter",
50
iconName:"b",
51
},
52
{
53
label:"Notifications",
54
routerLink:"ui/notifications",
55
iconType:"letter",
56
iconName:"n",
57
},
58
{
59
label:"Progress & Activity",
60
routerLink:"ui/progress",
61
iconType:"letter",
62
iconName:"pa",
63
},
64
{
65
label:"Tabs & Accordians",
66
routerLink:"ui/tabs",
67
iconType:"letter",
68
iconName:"a",
69
},
70
{
71
label:"Sliders",
72
routerLink:"ui/sliders",
73
iconType:"letter",
74
iconName:"s",
75
},
76
{
77
label:"Treeview",
78
routerLink:"ui/tree",
79
iconType:"letter",
80
iconName:"tv",
81
}
82
]
83
},
84
{
85
label:"Forms",
86
iconType:"pg",
87
iconName:"form",
88
toggle:"close",
89
mToggle:"close",
90
submenu:[
91
{
92
label:"Form Elements",
93
routerLink:"forms/elements",
94
iconType:"letter",
95
iconName:"fe",
96
},
97
{
98
label:"Form Layouts",
99
routerLink:"forms/layouts",
100
iconType:"letter",
101
iconName:"fl",
102
},
103
{
104
label:"Form Wizard",
105
routerLink:"forms/wizard",
106
iconType:"letter",
107
iconName:"fq",
108
}
109
]
110
},
111
{
112
label:"Cards",
113
routerLink:"cards",
114
iconType:"pg",
115
iconName:"grid"
116
},
117
{
118
label:"Views",
119
routerLink:"views",
120
iconType:"pg",
121
iconName:"ui"
122
},
123
{
124
label:"Tables",
125
iconType:"pg",
126
iconName:"tables",
127
toggle:"close",
128
mToggle:"close",
129
submenu:[
130
{
131
label:"Basic Tables",
132
routerLink:"tables/basic",
133
iconType:"letter",
134
iconName:"bt",
135
},
136
{
137
label:"Advance Tables",
138
routerLink:"tables/advance",
139
iconType:"letter",
140
iconName:"dt",
141
}
142
]
143
},
144
{
145
label:"Maps",
146
iconType:"pg",
147
iconName:"map",
148
toggle:"close",
149
mToggle:"close",
150
submenu:[
151
{
152
label:"Google Maps",
153
routerLink:"tables/basic",
154
iconType:"letter",
155
iconName:"gm",
156
},
157
{
158
label:"Vector Maps",
159
routerLink:"tables/data",
160
iconType:"letter",
161
iconName:"vm",
162
}
163
]
164
},
165
{
166
label:"Charts",
167
routerLink:"charts",
168
iconType:"pg",
169
iconName:"charts"
170
},
171
{
172
label:"Extra",
173
iconType:"pg",
174
iconName:"bag",
175
toggle:"close",
176
mToggle:"close",
177
submenu:[
178
{
179
label:"Invoice",
180
routerLink:"extra/invoice",
181
iconType:"letter",
182
iconName:"in",
183
},
184
{
185
label:"404 Page",
186
routerLink:"tables/data",
187
iconType:"letter",
188
iconName:"pg",
189
},
190
{
191
label:"500 Page",
192
routerLink:"tables/data",
193
iconType:"letter",
194
iconName:"pg",
195
},
196
{
197
label:"Login",
198
routerLink:"session/login",
199
iconType:"letter",
200
iconName:"l",
201
},
202
{
203
label:"Register",
204
routerLink:"session/register",
205
iconType:"letter",
206
iconName:"re",
207
},
208
{
209
label:"Lockscreen",
210
routerLink:"session/lock",
211
iconType:"letter",
212
iconName:"ls",
213
},
214
{
215
label:"Gallery",
216
routerLink:"extra/gallery",
217
iconType:"letter",
218
iconName:"gl",
219
},
220
{
221
label:"Timeline",
222
routerLink:"extra/timeline",
223
iconType:"letter",
224
iconName:"t",
225
}
226
]
227
},
228
{
229
label:"Docs",
230
routerLink:"http://pages.revox.io/dashboard/2.2.0/docs/",
231
iconType:"pg",
232
iconName:"note"
233
},
234
{
235
label:"Changelog",
236
externalLink:"http://changelog.pages.revox.io/",
237
iconType:"letter",
238
iconName:"Cl"
239
},
240
]
Copied!

API

Parameter
Instructions
Type
Defaults
Items
List of menu items in an array
array
null
HideExtra
Will force the assigned number of menu items to be hidden / wrapped in "more" section
number
null

Menu Items Structure

Label
Description
Type
Example
label
Name of the menu item that appears
string
Dashboard
routerLink
Route link path
string
/ui/buttons
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