Bootstrap is the most popular responsive and open source CSS framework used by software developers. The sidebar is a widget that contains navigational links to other parts of the website. The sidebar is generally used to display a list of menu items. This article demonstrates two methods to create a sidebar of a webpage where the sidebar remains closed or hidden by default. The first method displays the sidebar on clicking the Menu button and later the sidebar can be closed by clicking the X icon on the top right corner. The second method demonstrates a toggling sidebar that remains hidden by default. Clicking the Menu button displays the sidebar and clicking the Menu button again hides the sidebar.
Method 1: The webpage contains a division with
By default, the sidebar in both the examples remains closed or hidden. It is only when the user clicks the button the sidebar displays. Collapsing sidebars are space-efficient and make the webpage look clean and spacious. Sidebars can be fixed and scrolling as per the user requirement. The article, however, demonstrates fixed sidebars.