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 Fixed Left Sidebar Fixed Right Sidebar Default open sidebar Configuration Options

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 data-position='slidepush' and data-placement='left' attributes in the 'a' tag.

code 

							

							

								

							

							

								

							

						

					
						 
					
					
					

						

							

								

									
								

							

						

					
						 
					
				

			
				 
			
		

		 
		
		
		

		
			
			

				

					
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.

			

			
			
			

				

				
					
					
 
						code 
					

					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
	
					
					
					

						

							

								

									
								

							

						

					

					
				

			

			
		

		
		
		

		
			
			

				
				
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.

			

			
			
			

				

				
					
					
 
						code 
					

					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
				
					
					

						

							

								

									
								

							

						

					
 
				
				

			

			
		
 
		
		
		
		

		
			
			

				

					
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.

				

			

			
			
			

				

			
					
					
 
						code 
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					

					
					
					

						

							

								

									
								

							

						

					
 
				

			
 
			
		
 
		
		
				
		

			

				

					
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
								

							
						

					

				
 
				
				

					
 
						

							
								

									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.