Skip to content

Custom Navigation Bar

Currently, the custom navigation bar needs to be manually created as a YAML file and applied to the cluster.

Navigation Bar Categories

To add or reorder navigation bar categories, you can achieve it by adding or modifying the category YAML.

Here is an example of a category YAML:

apiVersion: ghippo.io/v1alpha1
kind: NavigatorCategory
metadata:
  name: management-custom # 
spec:
  name: Management # 
  isCustom: true # 
  localizedName: # 
    zh-CN: 管理
    en-US: Management
  order: 100 #

After writing the YAML file, you can see the newly added or modified navigation bar categories by executing the following command and refreshing the page:

kubectl apply -f xxx.yaml

Navigation Bar Menus

To add or reorder navigation bar menus, you can achieve it by adding a navigator YAML.

Note

If you need to edit an existing navigation bar menu (not a custom menu added by the user), you need to set the "gproduct" field of the new custom menu the same as the "gproduct" field of the menu to be overridden. The new navigation bar menu will overwrite the parts with the same "name" in the "menus" section, and perform an addition operation for the parts with different "name".

First-level Menu

Insert as a product under a navigation bar category

apiVersion: ghippo.io/v1alpha1
kind: GProductNavigator
metadata:
  name: gmagpie-custom # 
spec:
  name: Operations Management
  iconUrl: ./ui/gmagpie/gmagpie.svg
  localizedName: # 
    zh-CN: 运营管理
    en-US: Operations Management
  url: ./gmagpie
  category: management # 
  menus: # 
    - name: Access Control
      iconUrl: ./ui/ghippo/menus/access-control.svg
      localizedName:
        zh-CN: 用户与访问控制
        en-US: Access Control
      url: ./ghippo/users
      order: 50 # 
    - name: Workspace
      iconUrl: ./ui/ghippo/menus/workspace-folder.svg
      localizedName:
        zh-CN: 工作空间与层级
        en-US: Workspace and Folder
      url: ./ghippo/workspaces
      order: 40
    - name: Audit Log
      iconUrl: ./ui/ghippo/menus/audit-logs.svg
      localizedName:
        zh-CN: 审计日志
        en-US: Audit Log
      url: ./ghippo/audit
      order: 30
    - name: Settings
      iconUrl: ./ui/ghippo/menus/setting.svg
      localizedName:
        zh-CN: 平台设置
        en-US: Settings
      url: ./ghippo/settings
      order: 10
  gproduct: gmagpie # 
  visible: true # 
  isCustom: true # 
  order: 20 #

Second-level Menu

Insert as a sub-product under a first-level menu

apiVersion: ghippo.io/v1alpha1
kind: GProductNavigator
metadata:
  name: gmagpie-custom # 
spec:
  name: Operations Management
  iconUrl: ./ui/gmagpie/gmagpie.svg
  localizedName: # 
    zh-CN: 运营管理
    en-US: Operations Management
  url: ./gmagpie
  parentGProduct: ghippo # 
  gproduct: gmagpie # 
  visible: true # 
  isCustom: true # 
  order: 20 #

Comments