Navigation Menu #
In this page you will learn how to add navigation items in vertical navigation & horizontal navigation.
Vertical Menu #
In order to add a navigation item in vertical menu, you need to add a new item in menuItems array in constant/data.js file.
export const menuItems = [
{
title: "Chat",
icon: "heroicons-outline:chat",
link: "chat",
},
{
title: "Email",
icon: "heroicons-outline:mail",
link: "email",
},
{
title: "Kanban",
icon: "heroicons-outline:view-boards",
link: "kanban",
},
];
Note
The link property should a route name from App.jsx file.
Tip
You can use Heroicons for icons.
How to add a menu label?
You can add a menu label by adding a new item in menuItems array with label property.
{
isHeadr: true,
title: "DASHBOARD",
},
How I add sub menu items?
You can add sub menu items by adding a new child property in the item object.
{
title: "Dashboard",
icon: "heroicons-outline:home",
isOpen: true,
child: [
{
childtitle: "Analytics Dashboard",
childlink: "home",
},
{
childtitle: "Ecommerce Dashboard",
childlink: "ecommerce",
},
],
},
Note
The childlink property should be the same as the route name in router.js file. If you want to open the sub menu by default, you need to add isOpen: true property in the parent item object.
Horizontal Menu #
In order to add a navigation item in horizontal menu, you need to add a new item in topMenu array in constant/data.js file.
export const topMenu = [
{
title: "Chat",
icon: "heroicons-outline:chat",
link: "chat",
},
{
title: "Email",
icon: "heroicons-outline:mail",
link: "email",
},
{
title: "Kanban",
icon: "heroicons-outline:view-boards",
link: "kanban",
},
];
Note
The link property should a route name from router.js file.
Tip
You can use Heroicons for icons.
How I add sub menu items?
you can add sub menu items by adding a new child property in the item object.
export const topMenu = [
{
title: "Dashboard",
icon: "heroicons-outline:home",
isOpen: true,
child: [
{
childtitle: "Analytics Dashboard",
childlink: "home",
},
{
childtitle: "Ecommerce Dashboard",
childlink: "ecommerce",
},
],
},
];
Note
The childlink property should a route name from router.js file.