Responsive Sidebar
Responsive sidebar container.
Projects /
Projects /
Responsive sidebar container.
The Responsive Sidebar is a behavioral component used to store content that is indirectly related to the document's main content. It takes care of the responsive behavior: on smaller screens, the sidebar visibility is controlled by a button; on bigger screens, the sidebar becomes "static".
In its overlay (default) variation, the visibility of the sidebar is controlled by a button. To connect the button to the sidebar, make sure the aria-controls value of the button is equal to the sidebar ID value.
<button class="btn btn--primary" aria-controls="sidebar">Show sidebar</button>
<aside class="sidebar sidebar--static@md js-sidebar" id="sidebar"></aside>Optionally, you can have the sidebar animating from the right o mobile by adding the .sidebar--right-on-mobile class modifier:
<aside class="sidebar sidebar--static@md sidebar--right-on-mobile js-sidebar" id="sidebar"></aside>To change the sidebar behavior (from "overlay" to "static"), use one of the .sidebar--static@{breakpoint} class modifiers:
<div class="hide@md">
<button class="btn btn--primary" aria-controls="sidebar">Show sidebar</button>
</div>
<div class="flex@md">
<aside class="sidebar sidebar--static@md js-sidebar" id="sidebar">
<!-- sidebar panel -->
</aside>
<main>
<!-- main content -->
</main>
</div>In the snippet above, note how the hide@md, flex@md, and sidebar--static@md classes all target the same breakpoint. The button is hidden using the hide@{breakpoint} utility class when the sidebar behavior is updated. Also, in our example, the wrapper of the sidebar and main content becomes a flex container at the same breakpoint.
Use the data-static-class="{class}" attribute on the .sidebar element if you want to add a list of classes to the sidebar when it's in the --static variation (e.g., add data-static-class="border-right" if you want a right border when the sidebar becomes static. Check the CodyFrame documentation for a full list of available utility classes.
The sidebar width on mobile is determined by the max-width of the .sidebar__panel:
.sidebar:not(.sidebar--static) {
// ...
.sidebar__panel {
width: 100%;
max-width: 380px;
// ...
}
}When the sidebar becomes "static" (.sidebar--static@{breakpoint}), you have several options to set the sidebar width.
Option 1 - if you have a single sidebar in your project, you can set the width in CSS:
.sidebar--static, html:not(.js) .sidebar {
// ...
width: 260px;
}Option 2 - use the grid classes:
<div class="grid gap-md@md">
<aside class="sidebar sidebar--static@md col-3@md js-sidebar">
<!-- ... -->
</aside>
<main class="position-relative z-index-1 col-9@md sidebar-loaded:show">
<!-- ... -->
</main>
</div>Option 3 - create a custom width utility class in your 'custom-style/_util.scss' file:
<div class="flex@md items-start@md">
<aside class="sidebar sidebar--static@md js-sidebar" data-static-class="width-260">
<!-- ... -->
</aside>
<main class="position-relative z-index-1 flex-grow sidebar-loaded:show">
<!-- ... -->
</main>
</div>// 👇 your custom utility class
.width-260 {
width: 260px;
}Option 4 - Use the max-width utility classes:
<div class="flex@md">
<aside class="sidebar sidebar--static@md js-sidebar" data-static-class="position-relative z-index-1 width-100% max-width-xxxxs">
<!-- ... -->
</aside>
<main class="position-relative z-index-1 flex-grow sidebar-loaded:show">
<!-- ... -->
</main>
</div>Here's a quick tutorial that shows how to combine the Responsive Sidebar with other components:
On smaller screen, when the sidebar is open, you may want to change the overflow behavior of a different element (e.g., the body element) to prevent the underlying content from scrolling while the sidebar is open.
To do that, add a data-sidebar-prevent-scroll attribute equal to a unique CSS selector of the element to modify. For example, to target the <body>:
<aside class="sidebar sidebar--static@md js-sidebar" data-sidebar-prevent-scroll="body">
<!-- sidebar content here -->
</aside>On small device, if you need to open the sidebar without a trigger element, you can use the openSidebar custom event.
Here's how you can use this custom event:
function openSidebar(element) {
var event = new CustomEvent('openSidebar');
element.dispatchEvent(event);
};
var sidebar = document.getElementsByClassName('js-sidebar');
if(sidebar.length > 0) openSidebar(sidebar[0]);You can also pass the element you want the focus to be moved to when the sidebar element is closed:
function openSidebar(element, focusElement) {
var event = new CustomEvent('openSidebar', { detail: focusElement });
element.dispatchEvent(event);
};If your sidebar is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.
Once the dynamic content has been added to the page, initialize it using the Sidebar object:
var sidebar = document.getElementsByClassName('sidebar')[0];
new Sidebar(sidebar);
