Sneat

# 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 
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 []

Check below code snippet to add nav link:

TIP

icon property is not required if link is inside group (not first level item).

# Vertical nav group

Check below code snippet to add nav group:

TIP

icon property is not required if group is inside another group (not first level item).

# Vertical nav section title

Check below code snippet to add nav section title:

# Horizontal nav

You can add horizontal nav items via /src/navigation/horizontal/index.ts file.

This file should export and array of items so without any items file should look like below:

export default []

Check below code snippet to add link:

TIP

icon property is not required if link is on third level.

# Horizontal nav group

Check below code snippet to add group:

TIP

icon property is not required if group is on third level.

# Badges

Vertical nav link & group supports adding badges. Badges are rendered on right side of item title.

You can optionally pass badgeContent & badgeClass property to add badge to the item.

TIP

badgeContent property is enough to render badge, badgeClass is optional.

# Disabling nav items

You can disable any item by simply setting disable property to true

# Fetching nav items from API

Some times we might have to fetch the nav items from API rather than hard coding them in file.

← Authentication →