Menu
Self-contained site navigation menu. Items live in element props (not in a separate DB). Per-item dropdown can be 'none' (link only), 'simple' (text sub-menu, max depth 2), or 'mega' (designable block tree in the dropdown). Mega items render their `megaContent: BlockSchema[]` recursively.
Type: "menu"
Self-contained site navigation menu. Items live in element props (not in a separate DB). Per-item dropdown can be 'none' (link only), 'simple' (text sub-menu, max depth 2), or 'mega' (designable block tree in the dropdown). Mega items render their `megaContent: BlockSchema[]` recursively.
Props
| Field | Type | Default | Keterangan |
|---|---|---|---|
dropdown.openOn | 'hover'|'click' | — | Buka pada |
dropdown.animation | 'fade'|'slideDown'|'none' | — | Animasi |
dropdown.animationDuration | number | — | Durasi (ms) |
dropdown.hoverDelay | number | — | Hover delay (ms) (tampil saat dropdown.openOn = hover) |
Contoh
{
"id": "men01abc",
"type": "menu",
"props": {
"brand": {
"enabled": false,
"mode": "text",
"text": "",
"tagline": "",
"imageUrl": "",
"imageDarkUrl": "",
"height": "32px",
"link": {
"type": "custom",
"url": "/"
},
"color": "",
"colorHover": "",
"fontSize": "",
"fontWeight": "",
"taglineColor": ""
},
"items": [
{
"id": "item-home",
"label": "Home",
"link": {
"type": "custom",
"url": "/"
},
"dropdownType": "none"
},
{
"id": "item-shop",
"label": "Shop",
"link": {
"type": "custom",
"url": "/shop"
},
"dropdownType": "none"
},
{
"id": "item-about",
"label": "About",
"link": {
"type": "custom",
"url": "/about"
},
"dropdownType": "none"
},
{
"id": "item-contact",
"label": "Contact",
"link": {
"type": "custom",
"url": "/contact"
},
"dropdownType": "none"
}
],
"actions": {
"login": {
"enabled": false,
"label": "Login",
"icon": "LogIn",
"style": "link",
"link": {
"type": "custom",
"url": "/login"
},
"appearance": {
"iconSize": "",
"color": "",
"colorHover": "",
"fontSize": "",
"fontWeight": "",
"bg": "",
"bgHover": "",
"borderRadius": ""
}
},
"register": {
"enabled": false,
"label": "Register",
"icon": "UserPlus",
"style": "button",
"link": {
"type": "custom",
"url": "/register"
},
"appearance": {
"iconSize": "",
"color": "",
"colorHover": "",
"fontSize": "",
"fontWeight": "",
"bg": "",
"bgHover": "",
"borderRadius": ""
}
},
"account": {
"enabled": false,
"label": "Account",
"icon": "User",
"style": "icon",
"link": {
"type": "custom",
"url": "/account"
},
"appearance": {
"iconSize": "",
"color": "",
"colorHover": "",
"fontSize": "",
"fontWeight": "",
"bg": "",
"bgHover": "",
"borderRadius": ""
}
},
"cart": {
"enabled": false,
"label": "Cart",
"icon": "ShoppingBag",
"style": "icon",
"link": {
"type": "custom",
"url": "/cart"
},
"appearance": {
"iconSize": "",
"color": "",
"colorHover": "",
"fontSize": "",
"fontWeight": "",
"bg": "",
"bgHover": "",
"borderRadius": ""
},
"showCount": true,
"showTotal": false,
"badge": {
"bg": "",
"color": "",
"size": "",
"fontSize": "",
"totalColor": "",
"totalFontSize": ""
}
},
"search": {
"enabled": false,
"label": "Search",
"icon": "Search",
"style": "icon",
"link": {
"type": "custom",
"url": ""
},
"appearance": {
"iconSize": "",
"color": "",
"colorHover": "",
"fontSize": "",
"fontWeight": "",
"bg": "",
"bgHover": "",
"borderRadius": ""
},
"mode": "modal",
"placeholder": "Cari..."
},
"language": {
"enabled": false,
"label": "Bahasa",
"icon": "Globe",
"style": "icon",
"link": {
"type": "custom",
"url": ""
},
"appearance": {
"iconSize": "",
"color": "",
"colorHover": "",
"fontSize": "",
"fontWeight": "",
"bg": "",
"bgHover": "",
"borderRadius": ""
},
"display": "code"
}
},
"actionsOrder": [
"search",
"language",
"login",
"register",
"account",
"cart"
],
"bar": {
"preset": "split",
"order": [
"brand",
"menu",
"actions"
],
"alignments": {
"brand": "start",
"menu": "center",
"actions": "end"
},
"gap": "16px"
},
"styleSimple": {
"fontSize": "",
"fontWeight": "",
"color": "",
"colorHover": "",
"colorActive": "",
"activeIndicator": "none"
},
"styleMode": "advanced",
"actionsStyle": {
"color": "",
"colorHover": "",
"bg": "",
"bgHover": "",
"borderRadius": "",
"fontSize": "",
"fontWeight": "",
"gap": ""
},
"styling": {
"level1": {
"fontSize": "",
"fontWeight": "",
"color": "",
"colorHover": "",
"bg": "",
"bgHover": "",
"px": "",
"py": "",
"borderRadius": ""
},
"submenu": {
"fontSize": "",
"fontWeight": "",
"color": "",
"colorHover": "",
"bg": "",
"bgHover": "",
"px": "",
"py": "",
"borderRadius": ""
},
"dropdown": {
"bg": "",
"borderRadius": "",
"shadow": "",
"padding": "",
"minWidth": ""
}
},
"desktop": {
"layout": "horizontal",
"alignment": "left",
"gap": "8px"
},
"mobile": {
"breakpoint": "768px",
"mode": "hamburger",
"alignment": "left",
"gap": "0px",
"hamburger": {
"label": "",
"color": "",
"bg": "",
"borderRadius": ""
},
"drawer": {
"mode": "push",
"bg": "",
"padding": "",
"borderRadius": "",
"shadow": "",
"gap": "",
"itemColor": "",
"itemColorHover": "",
"dividerColor": "",
"dividerWidth": "",
"maxHeight": "",
"side": "left",
"width": "80vw",
"backdrop": true,
"backdropColor": ""
}
},
"dropdown": {
"openOn": "hover",
"animation": "fade",
"animationDuration": 200,
"hoverDelay": 120
}
}
}