Skip to content

Navigation Menu

In this page you will learn how to add navigation items in vertical navigation & horizontal navigation.

Glossary

LevelDescription
1st level itemIf item don't have any parents
2nd level itemIf item has single parent
3rd level itemIf 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 []

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 VerticalNavItems
js
export default [
  {
    title: 'Home',
    icon: 'i-mdi-home',
    to: 'index',
  },
]