Customise the menu appearance

You can customise the look and feel of the navigation menu to match the application theme.

1. Enter the Preview mode:

   Open the application in Preview mode using one of the following methods:

   Method 1

   Open the App Designer. Click the Preview button above the canvas.

   

   Method 2

   Alternatively, at the project level, click the Preview button on your application.

   

2. Open the Settings panel:

   In the preview window, click the Setting icon to open the menu customisation panel.

   

3. Modify the following settings:

   Setting	Description
   Enable Layout	A master switch to turn the application's overall layout and navigation structure on or off. Disabling this is useful for pages that should not display the main menu, such as a login page.
   Page Style Setting	Gives the option to choose between a light or dark theme for the page.
   Navigation Mode	Defines the primary layout of the menu. The icons represent different modes, such as a top menu layout, a side menu layout, or a mixed-mode layout.
   Content Width	Determines whether the main content area of the page is Fixed to a certain width or Fluid to stretch across the entire screen.
   Banner Height	Defines the height of the banner in pixels.
   Fixed Header	A toggle to make the top header bar stay at the top of the screen as the user scrolls.
   Fixed Banner	A toggle to make the banner stay at a fixed position as the user scrolls.
   Collapsed Button Bg Colour / Text Colour / Hover Colour	These fields control the colours of the menu collapse button (often a "hamburger" icon) in its various states.
   Page Container Block Padding	Sets the padding for the main block-level container that holds all the content on the page. Adjusting this value creates space around the entire content area, separating it from the edges of the main layout (like the header, sidebar, or footer).
   Page Container Content Padding	Sets the padding within the main content container. It creates space between the outer border of the content area and the actual components (like text, images, and cards) placed inside it.
   Fixed Sidebar	A toggle to make the side navigation menu "stick" in place as the user scrolls the main content.
   Sider Background Colour	Sets the background colour for the side navigation menu.
   Sider Width	Defines the width of the side navigation menu in pixels.
   Menu Header Height	Defines the height of the header bar in pixels.
   Split Menus	A toggle that separates parent and child menu items into different visual sections.
   Expand Actionbar	A toggle to expand the action bar area.
   Header Background Colour	Controls the background colour of the main header bar.
   Header Height	Controls the height of the main header bar in pixels.
   Menu Alignment	Controls if the menu aligns to the left, center, or right.
   Menu Item Font Type / Weight / Size / Colour	These fields control the typography of the primary menu items.
   Menu Item Hover Font Size / Colour	Controls the font size and colour when a user hovers over a menu item.
   Secondary Menu Item Font Weight / Size / Colour	Provides the same level of granular control over the typography for any secondary or sub-menu items.
   Secondary Menu Item Hover Font Size / Colour	Controls the font appearance when a user hovers over a secondary menu item.
   Menu Item Hover Bg Colour	Sets the background colour that appears when a user hovers over a menu item.
   Menu Item Selected Bg Colour	Sets the background colour for the currently selected menu item.
   Regional Settings: Header	Controls the visibility of the top header bar.
   Regional Settings: Footer	Controls the visibility of the bottom footer section.
   Regional Settings: Menu	Toggles the main navigation menu.
   Regional Settings: Menu Header	Toggles the header within the menu itself.
   Regional Settings: Page Header	Toggles the header specific to the current page content.
   Regional Settings: Banner	Controls the visibility of the banner.
   Other Settings: Weak Mode	A toggle that applies a "weak" or less visually prominent colour style to certain elements.

4. Save the changes:

   • Click Save To Application to apply the changes globally across all pages in your app.

   • Click Save To Page if you want to apply custom style only to the current page.

Last updated on 20 May 2026