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.


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.