Introduction
The menu component can be used to display a navigational menu such as the ones commonly seen at the top of the page. It can either be configured to always float at the top or any other place on the page.
Useful in mult-page apps that need navigation components to navigate between pages.
Configuration Options
Sticky
Expected Type: Boolean
If set to true, the component is always fixed to the top of the page. When the page scrolls, the component stays at the top over other components.
When false, it behaves like any other component and can be placed anywhere on the page.
Full Width
Expected Type: Boolean
If set to true, the component is always takes the full length of the page and manually adding a width has no effect. Useful when the page is responsive.
Menu Item Configuration
Menu Items
Each menu item represents a separate navigation link shown in the menu.
Creating a menu item
Click on + Menu Item under the menu configuration section to create one. Each menu item can be configured with the following properties:
| Property | Description | Type | Example |
|---|---|---|---|
| Label | The label for the menu item. This is what appears on the menu component for the user to click on. | String |
Home |
| Link To | The menu item can link to external urls or pages belonging to the same project | Page | External |
Page |
| Page | When link to is set to page, set this to the key of the page you want to link to. | String |
{{pages.page}} |
| Page Parameters | A set of parameters that are appended to the url you link to. | List |
Configuring page parameters
Sometimes, you want to pass dynamic information such as the id of the item being clicked to the next page.
Page parameters allow you to add these parameters, and they're appended as search query parameters in the url when navigating to the page.
Each parameter takes the following properties:
| Property | Description | Type | Example |
|---|---|---|---|
| Key | A unique key for the parameter. This is the name of the query parameter. | String |
id |
| Link To | The value for the parameter. This is value of the query parameter. | String |
cnuiqhw894h1 |
Triggers
Click:Triggers whenever the menu is clicked.Double Click:Triggers whenever the menu is clicked twice in quick succession.Right Click:Triggers whenever the menu is right-clicked.Mouse Enter:Triggers whenever the mouse starts hovering over the component.Mouse Leave:Triggers whenever the mouse stops hovering over the component.
Theme Options
Shadow:The menu's shadow. (Shadow)Border:The menu's border. You can also specify the radius for the edges. (Border)Background Color:The menu's background color. (String | Hex)Selected Color:The selected menu item's background color. (String | Hex)Link Color:The menu item's text color. (String | Hex)