CyberOcean Documentation

# Menus Configuration

In the CyberOcean AdminUI, menu items for both the sidebar and profile menu are essential for navigation. These items are defined as simple JSON objects. This document outlines the process of adding new menu items to these menus.

# Creating a New Sidebar Menu Item

To add a new item to the sidebar menu in the AdminUI, you need to create a JSON object with specific properties.

# Requirements and Structure

  • Name (Required): The display name for the menu item.
  • Route: The navigation route associated with this menu item. This should be provided by the user.

# JSON Object Structure

The menu item should be structured as follows:

{
  "icon": {
    "name": "mdi-icon-name" // Use a valid Material Design Icon (MDI)
  },
  "title": "Item Title", // Display title of the menu item
  "to": "/item-route", // Navigation route (KebabCase)
  "key": "item-key", // Unique key for the item (KebabCase)
  "position": "after existing-item-key", // Position relative to another item
  "roles": "root admin role1 role2" // Roles that can see this item (space-separated)
}

# Output Location and Operation

  • Location: The JSON object should be appended to the @/adminUI/menus.jsonc file.
  • Operation: Append the object to the mainMenu section of the menus.jsonc file.

# Creating a New Profile Menu Item

Adding a new item to the profile menu follows a similar process.

# JSON Object Structure for Profile Menu

{
  "icon": {
    "name": "mdi-icon-name" // Use a valid Material Design Icon (MDI)
  },
  "title": "Profile Item", // Display title of the menu item
  "to": "/profile-item-route", // Navigation route (KebabCase)
  "key": "profile-item-key", // Unique key for the item (KebabCase)
  "roles": "root admin role1 role2" // Roles that can see this item (space-separated)
}

# Output Location and Operation

  • Location: Append to the @/adminUI/menus.jsonc file.
  • Operation: Append the object to the profileMenu section of the menus.jsonc file.

# Best Practices

  • Icon Selection: Ensure the icon's name corresponds to a valid Material Design Icon.
  • Title and Key: Choose clear and descriptive titles. The key should be unique within the menu.
  • Route Formatting: Use KebabCase for routes (e.g., /user-profile).
  • Role Management: Define roles appropriately to control visibility of the menu items.

←