Navigation Menu

Vertical navigation offers a comprehensive list of global items, supporting limitless depth. It easily accommodates all your navigation links, smoothly scrolling when content exceeds the viewport.

Multi-level Navigation

Multi-level navigation is crafted to unveil deeply nested menus when you click or hover (in compact mode) over submenu items.

Level	Description
1st level	Item with no parent
2nd level	Item with a single parent
3rd level	Item with a parent that has its own parent
..

Here’s how to add navigation items that can include multiple levels. ✨

export default [
    // level primary
    {
        title: 'apps',
        children: [
            // level secondary
            {
                title: 'eCommerce',
                icon: {name: 'ShoppingBag'},
                children: [
                    // level tertiary
                    {
                        title: 'Sales',
                        to: '/apps/ecommerce/sales',
                    },
                    {
                        title: 'Transactions',
                        to: '/apps/ecommerce/transactions',
                    },
                ],
            },
        ],
    },
]

Each object in the array of nav items can have the following properties:

• title:String
• icon:String
• to:String
• href:String
• target:String
• children:Array
• subject:String
• action:[String,Array]

Note

• To display an icon, add your desired icon name from iconsax or tabler icons. More info about icons here.

• The navigation utilizes the EListRecursive, allowing you to use the variant property to display the list in two styles: fill and line.

• Use action and subject properties to add route protection. More Info Here

Vertical nav

In order to add navigation items refer to src/navigation/index.js file.

navigation
 └── 📜 Index.js

This file exports an array of item as below:

export default [
// Your nave items here
]

The index.js file is imported in src/layout/Default.jsx

Vertical nav link

Navigation supports both fully qualified and relative URLs. When a page's URL matches a navigation item's URL, that item is automatically expanded and highlighted.

export default [
    {
        title: 'Ticket',
        to: '/ticket',
    },
]

Note

navActiveLink is a React Router handle attribute that keeps a navigation link active for related sub-pages. For example, when you’re on the TicketDetails page at (/ticket/:id), the Ticket nav item (/ticket) remains active in the sidebar, showing that you’re still within the Ticket section.

Show me an example!

File: src/routes/Router.js

const routes = [
    {
        path: "ticket",
        lazy: () => import('./Ticket'),
        handle: {
            navActiveLink: "ticket/:id",
        }
    },
    {
        path: "ticket/:id",
        lazy: () => import('./TicketDetails'),
    }
    {/* ... */}
]