Sidebar
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.
Simple Sidebar
Simple Sidebar is a basic sidebar menu page layout for Bootstrap 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 .pmd-sidebar-slide-push
.
Fixed Left Sidebar
Fixed sidebar is the one in which, when the sidebar is open, it overlaps over the content. To create this sidebar, add .pmd-sidebar-left-fixed
.
Fixed Right Sidebar
You can also create a secondary sidebar, that is, a right sidebar for tabs, palettes, or secondary actions. To create such a sidebar, add .pmd-sidebar-right-fixed
.
Default open Sidebar
On load you can show both left and right sidebars visible. Add .pmd-sidebar-open
along with the .pmd-sidebar
to the sidebar in order to make it open by default.
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-slide-push |
Used to create the sidebar which when opens, it slides off the content to right. | Required |
.pmd-sidebar-left-fixed |
Used to show sidebar fixed to the left side of the window, which when opens, it overlaps over the content. | Optional |
.pmd-sidebar-right-fixed |
Used to create a right sidebar. | Optional |
.pmd-sidebar-open |
Add this class to the sidebar when you want it to be open by default. | Optional |
.pmd-sidebar-nav |
Used to show/hide user profile dropdown in navbr sidebar. | Optional |