Back to documentation
Menu bar 2
A new customizable menu bar that can be used at the top of the page.
Information
Plan: Personal
Added at: 2026-08-15
Properties
| Property | Type | Default |
|---|---|---|
| Logo - Link | string | "" |
| Logo - Text | string | "" |
| Logo - Source | string | "" |
| Logo - Alternative text | string | "" |
| Columns | number | 1 |
| Is ignoring text shadow desktop menu bar | boolean | false |
| Is ignoring text shadow mobile menu bar | boolean | false |
| Is opening and closing by click | boolean | false |
| Is vertical desktop menu bar | boolean | false |
| Is vertical mobile menu bar | boolean | false |
| Items | {
"items": {
"props": {
"text": {
"type": "string"
},
"href": {
"type": "string"
},
"target": {
"type": "string"
},
"icon": {
"type": "string"
},
"badge": {
"type": "string"
},
"columns": {
"type": "number"
},
"isIgnoringPadding": {
"type": "boolean"
},
"isDesktopOnly": {
"type": "boolean"
},
"isMobileOnly": {
"type": "boolean"
},
"items": {
"items": {
"props": {
"text": {
"type": "string"
},
"href": {
"type": "string"
},
"target": {
"type": "string"
},
"icon": {
"type": "string"
},
"badge": {
"type": "string"
},
"isExpandable": {
"type": "boolean"
},
"items": {
"items": {
"props": {
"text": {
"type": "string"
},
"href": {
"type": "string"
},
"target": {
"type": "string"
},
"icon": {
"type": "string"
},
"badge": {
"type": "string"
},
"isExpandable": {
"type": "boolean"
},
"heading": {
"type": "boolean"
},
"indented": {
"type": "boolean"
},
"items": {
"items": {
"props": {
"text": {
"type": "string"
},
"href": {
"type": "string"
},
"target": {
"type": "string"
},
"icon": {
"type": "string"
},
"badge": {
"type": "string"
},
"heading": {
"type": "boolean"
},
"indented": {
"type": "boolean"
}
},
"type": "object"
},
"type": "array"
}
},
"type": "object"
},
"type": "array"
}
},
"type": "object"
},
"type": "array"
}
},
"type": "object"
},
"type": "array"
} | [] |
| Background | string | "linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 50%, rgba(255, 255, 255, 0.1) 100%)" |
| Background color | string | "var(--ophixor-semantic-interactive-primary-hover)" |
| Border color | string | "var(--ophixor-semantic-interactive-primary-hover)" |
| Text - Color | string | "var(--ophixor-semantic-surface-base)" |
| Text - Color - Hover | string | "var(--ophixor-semantic-surface-page)" |
| Background color | string | "var(--ophixor-semantic-surface-base)" |
| Border color | string | "var(--ophixor-semantic-interactive-primary)" |
| Color | string | "var(--ophixor-semantic-text-primary)" |
| Color - Hover | string | "var(--ophixor-semantic-surface-page)" |
| Component - Color | string | "var(--ophixor-semantic-text-primary)" |
| Background color - Hover | string | "var(--ophixor-semantic-interactive-primary)" |
| Badge - Background color | string | "var(--ophixor-semantic-status-danger-text)" |
| Badge - Color | string | "var(--ophixor-semantic-surface-base)" |
| Border bottom color - Hover | string | "var(--ophixor-semantic-surface-base)" |
| Border right color | string | "var(--ophixor-semantic-interactive-primary)" |
| Color | string | "var(--ophixor-semantic-surface-base)" |
| Color - Hover | string | "var(--ophixor-semantic-surface-page)" |
| Is visible | boolean | true |
| Selectors | array | [] |