Introduction
The sidebar component can be used to display a navigational sidebar 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.
Sidebar Item Configuration
Sidebar Items
Each sidebar item represents a separate navigation link shown in the sidebar.
Creating a sidebar item
Click on + Menu Item under the sidebar configuration section to create one. Each sidebar item can be configured with the following properties:
| Property | Description | Type | Example |
|---|---|---|---|
| Label | The label for the sidebar item. This is what appears on the sidebar component for the user to click on. | String |
Home |
| Link To | The sidebar 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 sidebar is clicked.Double Click:Triggers whenever the sidebar is clicked twice in quick succession.Right Click:Triggers whenever the sidebar 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 sidebar's shadow. (Shadow)Border:The sidebar's border. You can also specify the radius for the edges. (Border)Background Color:The sidebar's background color. (String | Hex)Selected Color:The selected sidebar item's background color. (String | Hex)Link Color:The sidebar item's text color. (String | Hex)