Menus
How to add and style menus.
Last updated
Was this helpful?
How to add and style menus.
Last updated
Was this helpful?
A menu is used to display a list of links vertically or horizontally. They are navigational tools that help users find and access different sections, features, or functions. They are typically organized lists of links or options presented in a way that facilitates easy navigation and interaction.
Location in the Parts Library: Most Used Parts > Menu
Choose the menu most closely aligned with what you need from the Parts Library.
Choose your preferred tooltip variation, select the part where you’d like to add your menu, and click ‘+ add to page’. This would typically be within a part such as a navbar, a footer, or a side drawer.
The menu (parent) houses some menu items (children). There may be multiple menu items, each containing links, together with the relevant text for that link.
The following shows the key parts within a menu and their parent/child relationship:
To add a menu item to a menu, select an existing menu item, and duplicate it using the edit menu in the top toolbar. Here's how:
Then edit and link the item as needed.
The text within the link is edited the same as the way text is edited in other parts, using both the Text Editor and the Font Editor in the property editing panel on the right.
The following shows links being edited and linked to pages:
To add an icon to your menu item, select the link part. Then add an icon. The icon will be added to the end of the link. To change the position of the icon, select the icon, and using the property editing panel, go to 'Slot position', and choose 'prepend'.
To change the orientation of the menu - say from vertical to horizontal (or vice versa), select the menu, then go to the Orientation property in the right property panel. There you'll see the options to change the orientation of the menu based on device size.
Menus can be given a hard edge or have the level of rounding changed using the Decoration Editor, in the 'Rounding' tab.
Rounding can be applied to all sides of the menu, the top left, top right, bottom left, and bottom right, or a combination of these. There are various degrees of rounding ranging from none to full, with incremental size points in between.
To remove all rounding from a menu, giving it a hard edge, choose rounding of 'none'.
The image will take up the full background space of the menu.
Menu parts can exist in other navigation parts such as , and in other layout parts such as (sidebars).
To add a to your menu item, first select the text that needs to be linked, then navigate to the parent part which is "Link". On the right property editor panel, select 'link to', and you'll see the current list of pages within your app that you can link to. If the page you want to link to within your app hasn't been created yet, select 'new page'. You'll then be prompted to complete some details for your new page. You can also link to an external URL.
Like many other parts, , , , , , , and can be adjusted using the property editor on the right, once the menu has been selected.
Menus are naturally .
To add a to your menu, select the menu, then go to the property editor in the right panel. Go to 'Image', then choose your preferred image from the Media Gallery or upload a new image. You can then adjust the of the background image within the Decoration Editor as needed.
Buttons
Icons
Links
Text
Dropdowns
Navbars
Images
Customizing and formatting
