Navigation Menu
To update the navigation menu items, updatesrc/navigation/menu.js
file. We just created different files for different sections so we can find items easily. You can follow the same or just write the all the items in index.js file.Let’s understand how to create each navigation menu item:
Section Title
You can create section title using simple object with single propertysubheader
:
Navigation Menu Link
This will be the route link. For creating link follow below object structure:title
property will be title (rendered text) of this link. This will be key for i18n.to
is vue-router’s route name.icon
property value should be material design icon.
to
property.
target="_blank"
and also it will add rel="nofollow"
. Please note in above example we have used href property for external links and not to property.
You can also use
target
property in internal app route if you want to open your app’s internal route in new tab, just like we did with authentication pages.Rendering as child of Menu Group
If your navigation menu link is child of any navigation menu group then it will render circle as icon and if you provide any icon using icon property it will render as well but size of that icon will be smaller than normal icons. So, don’t provideicon
property if your navigation link is child of navigation menu group.badge
: property is used to render badge textbadgeColor
: This property is optional. Default variant for badge is primary.
disable
property and set it to true
.
Navigation Menu Group
For navigation menu group you can use below object:title
property will be title of that group and it is key for i18n as well.icon
property value should be material design icon.children
property is group children. It can have menu items or menu groups as children. This also supportbadge
,badgeColor
anddisabled
properties same as menu link.
Rendering as child of Menu Group
If menu group is child of menu group then it’s icon property is optional just like rendering of menu link inside menu group.Header
Creating section title is little bit different than vertical navigation menu. You need to specifyicon
and children
of header this time: