Navigation Menu

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

• Glossary
• Vertical nav
  • Vertical nav link

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

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:

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 VerticalNavItems

JS

export default [
  {
    title: 'Home',
    icon: 'i-mdi-home',
    to: 'index',
  },
]