Menus
How to add and style menus.
What is A Menu?
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
Menu parts can exist in other navigation parts such as navbars, and in other layout parts such as drawers (sidebars).
Adding the 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 Components of a Menu
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:
Editing the Menu
Adding New Menu Items
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.
Editing the Link Text
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.
Linking the Menu Items
To add a link 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.
The following shows links being edited and linked to pages:
Adding an Icon to Your Menu Item
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'.
Styling the Menu
Like many other parts, borders, shadow, rounding, opacity, rounding, colors, and color gradients can be adjusted using the property editor on the right, once the menu has been selected.
Changing the Orientation of the Menu
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.
Rounding
Menus are naturally rounded.
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'.
Adding a Background Image To a Menu
To add a background image 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 opacity of the background image within the Decoration Editor as needed.
The image will take up the full background space of the menu.
Related Information
Last updated
Was this helpful?