Sidebars - Right, Fix Mini

Main sidebar
Navigation
Victoria Baker
 Santa Ana, CA
Show right - fix mini width
This option can be considered as the default one - when right sidebar is shown, main sidebar doesn't change width, whether it's default or mini. Just add .sidebar-right-toggleclass to sidebar control button. This option can be also combined with multiple left sidebars.
Sidebars overview

Sidebar - vertical area that displays onscreen and presents widget components and website navigation menu in a text-based hierarchical form. All sidebars are css-driven - just add one of css classes to the bodytag and/or .sidebarcontainer, and sidebar will change its width and color. No js, css only. Although sidebar type is based on css, buttons do their job with JS - they switch necessary classes in <body>tag. Below you'll find summarized tables with all available buttonand sidebarcontainer classes. By default, the template includes 6 different sidebar types and combinations:

1. Default sidebar

Default template sidebar has 270px(~16.88rem) width, aligned to the left (to the right in RTL version) and has dark blue background color. All navigation levels are based on accordion orcollapsible functionality, open on click. Supports 2 versions: static and fixed. Fixed version can be used with native or custom scrollbars.

2. Mini sidebar

Mini sidebar has 56pxwidth, which is calculated dynamically. No text in parent level of menu items, aligned to the left (to the right in RTL version) and has dark blue background color. Second navigation level opens on parent level hover, absolute positioned, other children levels are based on accordion or collapsible functionality, open on click. It is requiredto add .sidebar-xsclass to the <body>tag. This class is responsible for sidebar width and main navigation. By default all components except main navigation are hidden in mini sidebar. Can be used with main sidebar only.

3. Secondary sidebar

Main sidebar has 270pxwidth or 56px(if .sidebar-xsclass added). Secondary sidebar has fixed width of 270px, which is similar to default and right sidebars, so different sidebar components can be placed to all sidebar types. Main and secondary sidebars can contain any content - menu, navigation, buttons, lists, tabs etc. Only main sidebar is collapsible.

4. Right sidebar

Right sidebar includes additional sidebar displayed on the right (left in RTL direction) side. It has a static position, appears as an additional component with 100% height and pushes content left/right. There are 2 different ways of displaying alternative sidebar: first - when it collapses main sidebar from default to mini width and second - when it hides the main sidebar. For these actions are responsible 2 different buttons - .sidebar-right-main-toggleand .sidebar-right-main-hide.

5. Right/Secondary sidebars

Secondary and Right sidebars can be used together, so basically it is a 4 column layout. When right sidebar is shown, additional options are available: hide main sidebar, hide secondary sidebar or collapse main sidebar width. Since right sidebar is hidden by default, you can display all 4 sidebars at once by manipulating classes. Options are accessible via proper button and/or body classes.

Button classes
Overview

This table displays all optional buttonclasses, responsible for the sidebar appearance. Depending on the sidebar type, add one of these classes to any button or link and this element will handle sidebar control. Multiple controls are also available - add as many sidebar controls as you wish. Please note: these classes don't change sidebar markup, only CSS rules.

Button class Action
.sidebar-main-toggle Collapsible sidebar. Changes main sidebar width from default to mini. This button is added to all pages by default.
.sidebar-main-hide Hides and shows mainsidebar. Used mostly in dual sidebar type to hide main sidebar. In other layouts this button does the same job as .sidebar-hide-allbutton.
.sidebar-right-toggle Toggles right sidebar - if right sidebar is shown, main sidebar width remains the same, whether it's in default or mini mode.
.sidebar-right-main-toggle Toggles right sidebar - if right sidebar is shown, main sidebar changes its width from default to mini and vice versa. Works with all sidebar layouts - main and main/secondary.
.sidebar-right-main-hide Hides and shows mainsidebar in layout with right sidebar. If right sidebar is shown, main sidebar is hidden despite current width.
.sidebar-secondary-toggle Hides/shows secondarysidebar. Secondary sidebar supports only toggle functionality and always has fixed width of 270px.
.sidebar-right-secondary-hide Hides/shows secondarysidebar - if right sidebar is shown, secondary sidebar is hidden. This works only in the layout with right sidebar.
.sidebar-mobile-main-toggle Toggles mainsidebar on mobile - slides from left to right.
.sidebar-mobile-secondary-toggle Toggles secondarysidebar on mobile - slides from left to right.
.sidebar-mobile-right-toggle Toggles rightsidebar on mobile - slides from right to left.
.sidebar-mobile-expand Expands sidebar to full width - changes fullscreen icons when expanded
Example Markup

Default placement of sidebar control buttons is top navbar: 

<!-- Navbar placement --><div class="navbar navbar-expand navbar-dark">    <div class="navbar-brand">...</div>       <ul class="navbar-nav">              <li class="nav-item">                        <a href="#" class="navbar-nav-link sidebar-control sidebar-main-toggle">                             <i class="icon-menu"></i>                 </a>         </li>                ...     </ul></div><!-- /navbar placement -->

Here is an example of button inside card header: 

<!-- Card header placement --><div class="card">    <div class="card-header header-element-inline">              <h5 class="card-title">Card title</h5>            <div class="header-elements">                        <button type="button" class="sidebar-main-toggle">                           <i class="icon-menu"></i>                         Collapse sidebar                        </button>            </div>       </div>       <div class="card-body">...</div></div><!-- /card header placement -->
Sidebar classes
Overview

This table demonstrates all classes for sidebarcontainer, responsible for the sidebar width and color. Almost all of these classes are mandatory, some of them are responsible for proper styling or have a specific code attached to this class (like .sidebar-mainclass, which has collapsible functionality). All classes can be combined depending on the type of sidebar:

Body class Description
.sidebar Default sidebar class, should be added in all layout types.
.sidebar-main Defines mainsidebar. Mini sidebar (.sidebar-xsclass) takes effect only if sidebar has .sidebar-mainclass. By default, all components except main navigation are hidden in mini sidebar.
.sidebar-secondary Defines secondarysidebar. Has fixed 270pxwidth and usually comes after main sidebar.
.sidebar-right Defines rightsidebar. Has fixed 270pxwidth and appears on the right side from the main sidebar.
.sidebar-light Defines lightsidebar. This class can be applied to all sidebar types and positions.
.sidebar-dark Defines darksidebar. This class can be applied to all sidebar types and positions. This class is also required for custom colors (see below).
.sidebar-dark.bg-* Defines sidebar background color. According to the custom color system, sidebar background color can be changed to one of the available colors by adding a proper class to the main sidebar container.
.sidebar-expand-[breakpoint] This class specifies when sidebar needs to be collapsed, basically when sidebar switches to mobile mode. Breakpoint should always be similar to navbarbreakpoint for proper matching. Available breakpoints are: xl, lg, md and sm. This class is required.
Example Markup

Default left aligned sidebar markup: 

<!-- Default sidebar layout --><body>  <!-- Page header --> <div class="page-header page-header-dark">           ...     </div>       <!-- /page header -->        <!-- Page container -->      <div class="page-content">           <!-- Main sidebar -->                <div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">                    <div class="sidebar-content">                                ...                     </div>               </div>               <!-- /main sidebar -->               <!-- Main content -->                <div class="content-wrapper">                        ...             </div>               <!-- /main content -->       </div>       <!-- /page content --></body><!-- /default sidebar layout -->

Mini sidebar markup. The only difference is <body>class: 

<!-- Mini sidebar layout --><body class="sidebar-xs"> <!-- Page header --> <div class="page-header page-header-dark">           ...     </div>       <!-- /page header -->        <!-- Page container -->      <div class="page-content">           <!-- Main sidebar -->                <div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">                    <div class="sidebar-content">                                ...                     </div>               </div>               <!-- /main sidebar -->               <!-- Main content -->                <div class="content-wrapper">                        ...             </div>               <!-- /main content -->       </div>       <!-- /page content --></body><!-- /mini sidebar layout -->
Right sidebar
Sidebar search
Actions
Navigation
Online users
Latest updates
  • Drop the IE specific hacksfor temporal inputs
    4 minutes ago
  • Add full font overrides for popovers and tooltips
    36 minutes ago
  • Chris Arneycreated a new Designbranch
    2 hours ago
  • Eugene Kopyovmerged Masterand Devbranches
    Dec 18, 18:36
  • Have Carousel ignore keyboard events
    Dec 12, 05:46
Contacts