Skip to content

Menus

Menu: Development → Menus
Deep link: /_Admin/development/menus?SiteId={siteGuid}

Manage site navigation menu definitions: create menu groups, maintain multi-level menu items (name, link, multilingual), and configure output HTML templates (placeholders for child items). After saving, reference in Layout / Page / View for the visitor site — see Front-end usage.

Not the admin left sidebar

This page is visitor site navigation data, unrelated to Edit Menu (Kooboo admin feature tree).

Permissions

Menu permission: menu (view). New menu, edit items, drag sort, delete items, change template require menu·edit; batch delete menus require menu·delete. Row Version requires site·log.

How to Open

  1. In Edit Menu, enable Development → Menus.
  2. Open Development → Menus in the left sidebar.
Menus list overview

Toolbar

ButtonPermissionDescription
New menumenu·editOpen new menu dialog
Menus list toolbar

List table

ColumnDescription
NameClick to edit menu
Referenced byReference relationships
Last modifiedSave time
VersionVersion history

Supports multi-select Delete entire menu (menu·delete).

Menus list

New menu dialog

Enter Name (required, unique, 1–50 chars), confirm to create and return to list (click name to edit).

New menu dialog

Edit menu

Path: /_Admin/development/menu/edit?SiteId=...&id={MenuId}

Breadcrumb: Menus → {menu name}. Card header shows menu name; right Edit template opens root menu template dialog (same as template button on items with children).

Edit menu: menu item tree
  • Top and child levels as draggable cards: left Name and URL, right action icons.
  • Drag (menu_move_handler) reorders siblings; save calls swap API.
  • No children: Add child, Edit, Delete.
  • With children: Edit template (sub-menu container), Add child, Edit, Delete; bottom + adds sibling.

If no items yet, page prompts Create now for the first item.

Menu items list and actions

Add menu item or row Edit (title Menu item):

FieldDescription
NameMultilingual sites: multiple Name rows per multilingual config; default language is primary name
URLDropdown of page routes (routesByType('Page')), filterable or manual; empty saves as #

Top-right language selector switches language column being edited.

Menu item dialog: name and URL

Edit template (title Edit template). Defines HTML output for items (including children):

AreaDescription
Top / bottom containerHTML fragments above/below {items} in subItemContainer
Middle templatesubItemTemplate, HTML for one menu item
Placeholder tagsClick to insert: AnchorText{anchortext}, Href{href}, SubItems{items}, ActiveClass{activeclass:className}, ParentId{parentid}, CurrentId{currentid}
PreviewRight side live HTML from current template and menu data
Menu template edit and preview

Front-end usage

After saving in admin, use one of the following in shared Layout or Page / View that needs navigation (no separate "enable" switch).

Insert Menu component in HTML; id is the menu Name from the table (e.g. main). Output structure follows {href}, {anchortext}, {items}, etc. from menu template dialog; current page highlight is automatic.

html
<menu id="main"></menu>

Optional menulevel limits depth (e.g. menulevel="2"). Dragging Menu from designer component panel is equivalent.

k.site.menus + k-for (custom structure)

Read the menu in <script env="server">, then build CSS-specific navigation HTML with the template binding k-for directive.

html
<script env="server">
    var nav = k.site.menus.get("main");
    var items = nav && nav.children ? nav.children : [];
</script>
<ul>
    <li k-for="item in items">
        <a k-attribute="href {item.url}" k-content="item.name"></a>
    </li>
</ul>

Methods, createSubMenu, multilingual getName, etc.: k.site.menus. Do not use deprecated k-query / v-query for menus.

Script maintenance (optional)

Install wizards, migrations, etc. may call k.site.menus.create, menu.createSubMenu in Code / k.api; day-to-day ops should use this page.

DocDescription
k.site.menusKScript API: get, list, item maintenance, front-end examples
Template bindingk-for, k-content, k-attribute
Development overviewDevelopment menu index
PagesMenu item URLs often point to pages
URLSite paths and routing
Edit MenuAdmin left feature tree (not this doc)