Sidebar
Bootstrap 4 Sidebar with Material Design UI
Sidebar is a narrow vertical area that is located alongside the main display area, typically containing related information or navigation options.This structure shows a responsive menu toggling system. When toggled using the button, the menu will appear/disappear.
NOTE: Data-Target attribute is used in the a tag to add multiple sidebars in a page. The value of the data-target attribute will be the id of the sidebar container aside. For Example: if you have created 2 sidebar containers with id=”sidebar1” and id=”sidebar2”, the a used to call those sidebars will have the attribute data-target=”sidebar1” and data-target=”sidebar2” respectively. Thus, the data-target attribute is used to make the action and the sidebar containers work collaboratively.
Simple Sidebar
Simple Sidebar is a basic sidebar menu page layout for Bootstrap 4 websites with off canvas navigation on smaller screen sizes. When toggled using the button, the menu will appear/disappear. When the sidebar opens, it slides in and the page content will be pushed off canvas. To create such sidebar, add data-position='slidepush' and data-placement='left' attributes in the 'a' tag.
Fixed Left Sidebar
Fixed sidebar is the one in which, when the sidebar is open, it overlaps over the content. To create such sidebar, add data-position='fixed' and data-placement='left' attributes in the 'a' tag.
Fixed Right Sidebar
You can also create a secondary sidebar, that is, a right sidebar for tabs, palettes, or secondary actions. To create such sidebar, add data-position='fixed' and data-placement='right' attributes in the 'a' tag.
Default Open Sidebar
On load you can show both left and right sidebars visible. Add is-open="true" attribute in the 'a' tag of the sidebar in order to make it open by default.
Third Level Sidebar
You can add a third level of sub menus inside a sidebar. We have used the Collapsible Logic of Bootstrap 4 for sub-menus.
Color Schemes
Add .pmd-sidebar-dark and .bg-* classes to apply background colors to the sidebar based on your color theme.
Configuration Options
The Propeller CSS classes apply various predefined visual enhancements to the slider. The table lists the available classes and their effects.
| Propeller Class | Effect | Remark |
|---|---|---|
.pmd-sidebar |
Used to hide sidebar content in desktop resolution. | Required |
.pmd-sidebar-toggle |
Used to show/hide sidebar sidebar menu. | Required |
.pmd-sidebar-nav |
Used to show/hide user profile dropdown in navbr sidebar. | Optional |
.pmd-sidebar-overlay |
Used to apply an overlay effect on the content area when the sidebar is open. | Optional |
.pmd-sidebar-dark |
Used with .bg-* classes to apply background color to the sidebar. |
Optional |
| HTML Attributes | Effect | Value |
|---|---|---|
data-position |
Defines the position of the content when the sidebar is opened. | slidepush, fixed |
data-placement |
Defines the side on which the sidebar will be displayed. | left, right |
is-open |
Defines whether the sidebar will be by-default open or close. | true, false |
is-open-width |
Defines the minimum width of the screen after which the sidebar with remain open or else it will remain in the overlay mode. For example, if the is-open-width=”1000”, the sidebar will remain open for all the devices with the width greater than 1000px. | Numeric Value |
jQuery plugin
Call the jQuery plugin to initialize the sidebar while fetching the data dynamically.