Sidebar - Layout Component
This component allows you to add a side menu on the left or right side of your website.
Accessing a Sidebar
To add a sidebar, go to the “Layout” category under the Components panel and drag and drop the "Sidebar" component in the canvas.
Adding a Sidebar
Adding a sidebar is very easy, but you have to first sketch a layout of your web page to add it and to do so follow the following steps:
- Step 1: Add Rows & Columns
To add the Row and the column components you first have to drag and drop a container in your canvas. In the example below, a container already exists in the canvas containing a navbar. In that container add a row, and then add two columns.
- Step 2: Adjust the Columns
Now, open the component setting of each column either by clicking this icon in the Right Toolbar or clicking this icon in the additionals of the column component and adjust the dimensions of each column in the ratio as per your desired design. In the example below the columns are adjusted in ratio, 4:8.
- Step 3: Drag & Drop the Sidebar
Now drag the "Sidebar" component and drop it in the smaller column. In the example below, a jumbotron is added in the other column for your better understanding.
Anatomy of a Sidebar
The sidebar contains the following components:
Sidebar: It’s the outermost layer of the Sidebar component which contains all the sub-layers of different components inside the sidebar.
Header: This component adds a heading component that enables you to add headings to your website and the content added in it.
Content: It’s the second layer of the Sidebar component which contains several sub-layers of “Paragraph” and links such as Home, About, Pages, Portfolio, Contact.
Paragraph (Heading): This component allows you to add the heading of the sidebar.
Link: This component lies within the “Content” layer and allows you to add multiple page links to guide end-users to navigate and access a web app.
