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 .sidebar
container, 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 .sidebar
container. Below you'll find summarized tables with all available button
and sidebar
container classes. By default, the template includes 6 different sidebar types and combinations:
1. Default sidebar
Default template sidebar has 300px
(~18.75rem) width, aligned to the left (to the right in RTL version) and has dark blue background color. All navigation levels are based on accordion or collapsible functionality, open on click. Supports 2 versions: fixed (default) and static (in static layout only). Both versions use default browser sidebars, but support custom scrollbars such as perfect scrollbar
component.
2. Mini sidebar
Mini sidebar has 56px
width, which is calculated dynamically (icon size + double padding). No text in parent level of menu items, aligned to the left (to the right in RTL version) and has dark blue background color. Sidebar changes the width on hover, no additional changes. It is required to add .sidebar-main-resized
class to the .sidebar
container if you want to have it collapsed by default. 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 300px
width or 56px
(if .sidebar-main-resized
class added). Secondary sidebar has the same fixed width of 300px
, 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. Secondary sidebar can be either collapsed or hidden.
4. Right sidebar
Right sidebar layout includes additional sidebar displayed on the right (left in RTL direction) side. It is displayed as an additional component with 100% height, similar to other sidebars. Right sidebar is visible by default, but can be collapsed or hidden.
5. Right/Secondary sidebars
Secondary and Right sidebars can be used together, so basically it is a 4 column layout. The width of any sidebar doesn't affect other layout columns, they all have independent width controls. Refer to the table below for more information.
6. Content (component) sidebar
Usually sidebar is not a part of content and mainly used for navigation. Limitless allows you to use sidebar outside and inside content area. Content sidebar isn't based on grid and has the same width as other sidebars, this means all sidebar components can be placed inside content sidebar. Supports left and right positioning and can be either stretched to fill all available height or height that depends on sidebar content height.