--- layout: page title: Main Sidebar Component --- The sidebar used in this page to the left provides an example of what your sidebar would look like. Construction of a sidebar: ```html ``` {: .max-height-300} #### Alternate Logo You can use two logo images instead of logo with text, you only need to change the markup to this: ```html

``` > Example from v3.0 docs. Based on the example above, you can replace `.brand-image-xl` on `.logo-xs` with `.brand-image-xs` or vice versa on `.logo-xl` for changed logo sizes. #### Search Form in Sidebar You can add this code above user-panel or nav-sidebar: ```html ``` {: .max-height-300} #### Additional Classes ##### Sidebar - `.sidebar-no-expand` Disables Auto Expand on Hover/Focus ##### Navbar - `.nav-child-indent` Child indent - `.nav-compact` Compact nav items - `.nav-flat` Flat nav style - `.nav-legacy` Legacy v2 nav style - `.nav-collapse-hide-child` Hide nav item submenus on collapsed sidebar > ##### Tip! > You can also use `.text-sm` on `.nav-sidebar` or `.brand-link` for smaller font. {: .quote-info} For more infromation about the JS part of the sidebar, please visit the [PushMenu plugin page]({% link javascript/push-menu.md %})