Bootstrap Sidebar Examples
8 Examples of Off-canvas, Overlay, Slide & Other Navs
Sidebar navigation has become a standard for responsive design, and many frontend developers are looking for the best approach.
Sidebar — off-canvas, left, right, floating, push or collapsing?
Here is a collection of responsive side navs to demonstrate various sidebar implementations including off-canvas, left, right, floating, push (where the main content is pushed to the side), sliding and collapsing.
Left sidebar that collapses to top
This example has a multi-level left side vertical nav, that automatically collapses when screen-width shrinks. When the sidebar is collapsed, the hamburger menu in the top right (displayed only when the sidebar is collapsed) can be used to toggle the nav. The sidebar nav position moves to the top on smaller screens (tablets, phones, etc..).
Left sidebar that collapses to icons
This snippet is a multi-level left side vertical nav, that automatically collapses to a narrow column of icons (facebook-style) when screen-width shrinks. The hamburger menu that is displayed above the main content area can be used to toggle the nav between narrow and full width. The side nav pushes the main content area to the right when expanded.
Dual collapsing sidebars and top nav
If you can’t have enough menus, this example shows 2 collapsing sidebars, and a top navbar. The responsive dual collapsing sidebars on both left and right side of main content. Use the chevron icons to toggle either of the sidebars once collapsed off-canvas. The navbar at the top has 3 links and toggles to a vertical dropdown that overlays the body on smaller screens.
Source code: http://www.codeply.com/view/MKhvVNgaNz
Left sidebar collapse to right-side overlay
This example demonstrates a left sidebar that collapses to a floating overlay right-side menu on smaller screens. There is also the standard Bootstrap top navbar and hamburger toggle menu enables a vertically collapsed top menu.
Left sidebar collapse to right-side push
Similar to the left-to-right overlay example, this snippet demonstrates a left sidebar that switches to a right-side “push” nav at smaller widths. When the sidebar is toggled to the wider state, it pushes the main content area to the left. This example also includes the responsive Bootstrap top navbar that vertically overlays the content when toggled.
Wider right sidebar off-canvas push menu
Sometimes you’ll want to make the sidebar wider on smaller screens. Here’s an example where the expanded right sidebar consumes more than half (60%) of the screen when it’s toggled. This can also be adjusted on the most of the other sidebar examples. Since absolute postioning is used in most of the examples, it’s a simple matter of changing the percentage width…
.row-offcanvas-right .sidebar-offcanvas { right: -60%; }
.row-offcanvas-left .sidebar-offcanvas { left: -60%; }
.row-offcanvas-right.active { right: 60%; }
.row-offcanvas-left.active { left: 60%; }Fixed width responsive sidebar, fluid layout
This example shows a fixed width left column for sidebar. The sidebar scrolls independently of the main content area that is a fluid width (a percentage of the page width). On mobile and tablet screens, the sidebar collapses off-canvas, and can then be toggled using a button on the left side.
Left sidebar, hamburger on top right
Finally, here is a simple left sidebar that collapse off-canvas on smaller devices. When collapsed, a hamburger in the top right can be used to toggle the sidebar menu.
If you still haven’t found a suitable sidebar example, explore the collection of sidebar snippets on Codeply: http://www.codeply.com/tagged/sidebar
Originally published at blog.codeply.com on May 18, 2016.
