MaterioAppearance
Navigation Menu
In this page you will learn how to add navigation items in vertical navigation & horizontal navigation.
Glossary
| Level | Description |
|---|---|
| 1st level item | If item don't have any parents |
| 2nd level item | If item has single parent |
| 3rd level item | If item has parent which in turn has another parent |
| ...and so on |
view code snippet with levels as comments
js
export default [
// 1st level
{
title: 'Apps',
icon: 'i-mdi-package-variant-closed',
children: [
// 2nd level
{
title: 'Invoice',
icon: 'i-mdi-file-document-outline',
children: [
// 3rd level
{
title: 'List',
to: 'apps-invoice-list',
},
],
},
],
},
]Vertical nav
You can add vertical nav items via src/navigation/vertical/index.ts file.
This file should export and array of items so without any items file should look like below:
js
export default []Vertical nav link
Check below code snippet to add nav link:
ts
import type { VerticalNavItems } from '@layouts/types'
export default [
{
title: 'Home',
icon: 'i-mdi-home',
to: 'index',
},
] as VerticalNavItemsjs
export default [
{
title: 'Home',
icon: 'i-mdi-home',
to: 'index',
},
]