PageHeaderMenu
areas: content, footer, header
The Page Header Menu block provides a structured layout for a page with a header containing a menu, content and footer area.
Block
content
Block Setup
id: block_id
type: PageHeaderMenu
properties:
breadcrumb:
list: []
menu:
links:
- id: home
type: MenuLink
pageId: home
properties:
icon: HomeOutlined
title: Home
- id: pages
type: MenuGroup
properties:
title: Pages
icon: LayoutOutlined
links:
- id: page1
type: MenuLink
pageId: page1
properties:
title: Page 1
- id: more_pages
type: MenuGroup
links:
- id: page3
type: MenuLink
pageId: page3
pageId: null
Settings
PageHeaderMenu JSON Schema Definition
type: object
properties:
events:
additionalProperties: false
properties:
onBreadcrumbClick:
description: Trigger action when a breadcrumb item is clicked.
type: array
onClose:
description: Trigger action when mobile menu is closed.
type: array
onEnter:
description: >-
Trigger actions every time a context is mounted and keep the page in
loading until all actions have finished.
type: array
onEnterAsync:
description: >-
Trigger actions every time a context is mounted and do not keep the page
in loading.
type: array
onInit:
description: >-
Trigger actions the first time a context is mounted and keep the page in
loading until all actions have finished.
type: array
onInitAsync:
description: >-
Trigger actions the first time a context is mounted and do not keep the
page in loading.
type: array
onMenuItemClick:
description: Trigger action when menu item is clicked.
type: array
onMenuItemSelect:
description: Trigger action when menu item is selected.
type: array
onOpen:
description: Trigger action when mobile menu is open.
type: array
onToggleDrawer:
description: Trigger action when mobile menu drawer is toggled.
type: array
onToggleMenuGroup:
description: Trigger action when mobile menu group is opened.
type: array
type: object
properties:
additionalProperties: false
properties:
breadcrumb:
description: Breadcrumb properties.
properties:
list:
description: List of breadcrumb links.
items:
description: Title of the breadcrumb link.
type: string
type: array
separator:
default: /
description: Use a custom separator string.
type: string
type: object
content:
additionalProperties: false
description: Content properties.
properties:
style:
description: Content css style object.
type: object
type: object
footer:
additionalProperties: false
description: Footer properties.
properties:
style:
description: Footer css style object.
type: object
type: object
header:
additionalProperties: false
description: Header properties.
properties:
color:
description: Header color.
type: string
contentStyle:
description: Header content css style object.
type: object
style:
description: Header css style object.
type: object
theme:
default: dark
description: Header theme color.
enum:
- light
- dark
type: string
type: object
logo:
additionalProperties: false
description: Header logo settings.
properties:
alt:
default: Lowdefy
description: Header logo alternative text.
type: string
size:
description: Header logo size for logo img element.
type: string
src:
description: Header logo source url.
type: string
srcSet:
description: Header logo srcSet for logo img element.
type: string
style:
description: Css style object to apply to logo.
type: object
type: object
menu:
description: Menu properties.
properties:
links:
items:
properties:
id:
description: Menu item id.
type: string
pageId:
description: Page to link to.
type: string
properties:
description: properties from menu item.
properties:
icon:
description: >-
Name of an Ant Design Icon or properties of an Icon block
to customize icon on menu item.
type:
- string
- object
title:
description: Menu item title.
type: string
type: object
required:
- id
- type
type: object
type: array
theme:
default: dark
description: Color theme of menu.
enum:
- dark
- light
type: string
type: object
menuLg:
description: >-
Menu large screen properties. Overwrites menu properties on desktop
screen sizes.
type: object
menuMd:
description: >-
Mobile menu properties. Overwrites menu properties on mobile screen
sizes.
type: object
style:
description: Css style object to apply to layout.
type: object
type: object