Sidebar Navigation

Onion Sidebar Navigation Structure

  • You can find the navigation file from layouts/layout-parts/navigation.jsx
navigation.jsx

_80
const navigations = [
_80
// Navigation Heading Level
_80
{ type: "label", label: "Dashboard" },
_80
_80
// Navigation Item
_80
{
_80
name: "Analytics 1",
_80
path: "/dashboard",
_80
icon: duotone.PersonChalkboard,
_80
},
_80
_80
{ type: "label", label: "Management" },
_80
_80
// Navigation Item with Children
_80
{
_80
name: "Users",
_80
icon: duotone.UserList,
_80
children: [
_80
{ name: "Add User", path: "/dashboard/users/add-user" },
_80
{ name: "User List 1", path: "/dashboard/users/user-list-1" },
_80
{ name: "User Grid 1", path: "/dashboard/users/user-grid-1" },
_80
{ name: "User List 2", path: "/dashboard/users/user-list-2" },
_80
{ name: "User Grid 2", path: "/dashboard/users/user-grid-2" },
_80
],
_80
},
_80
_80
// Navigation Item with permission
_80
{
_80
access: "admin",
_80
name: "Analytics 1",
_80
path: "/dashboard",
_80
icon: duotone.PersonChalkboard,
_80
},
_80
_80
// Navigation Item with External Link
_80
{
_80
type: "extLink",
_80
name: "Documentation",
_80
icon: duotone.FileCircleQuestion,
_80
path: "https://uko-react-doc.vercel.app/",
_80
},
_80
_80
// Disable Navigation Item
_80
{
_80
path: "https://uko-react-doc.vercel.app",
_80
name: "Item Disabled",
_80
icon: duotone.Folder,
_80
disabled: true,
_80
},
_80
_80
// Navigation Item with Multi Level Children
_80
{
_80
name: "Multi Level Item",
_80
icon: duotone.Apps,
_80
children: [
_80
{
_80
name: "Level A",
_80
path: "/level-a",
_80
},
_80
{
_80
iconText: "B",
_80
name: "Level B",
_80
children: [
_80
{
_80
name: "Level B1",
_80
path: "/level-b1",
_80
},
_80
{
_80
iconText: "B",
_80
name: "Level B2",
_80
children: [
_80
{ name: "Level B21", path: "/level-b21" },
_80
{ name: "Level B22", path: "/level-b22" },
_80
],
_80
},
_80
],
_80
},
_80
],
_80
},
_80
];