⚡️ Black Friday ends in 1 day - 50% off CodyHouse Pro Lifetime →

Projects

Progress value is 30%

Responsive Sidebar

Responsive sidebar container.

View Demo

Dependencies

All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

How to

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 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--right-on-mobile js-sidebar" id="sidebar"></aside>

To change the sidebar behavior (from "overlay" to "static"), use one of the [email protected]{breakpoint} class modifiers:

<div class="[email protected]">
  <button class="btn btn--primary" aria-controls="sidebar">Show sidebar</button>
</div>

<div class="[email protected]">
  <aside class="sidebar [email protected] js-sidebar" id="sidebar">
    <!-- sidebar panel -->
  </aside>
  
  <main>
    <!-- main content -->
  </main>
</div>

In the snippet above, note how the [email protected], [email protected], and [email protected] classes all target the same breakpoint. The button is hidden using the [email protected]{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" ([email protected]{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 [email protected]">
  <aside class="sidebar [email protected] [email protected] js-sidebar">
    <!-- ... -->
  </aside>
  
  <main class="position-relative z-index-1 [email protected] sidebar-loaded:show">
    <!-- ... -->
  </main>
</div>

Option 3 - create a custom width utility class in your 'custom-style/_util.scss' file:

<div class="[email protected] [email protected]">
  <aside class="sidebar [email protected] 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="[email protected]">
  <aside class="sidebar [email protected] 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:

Overflow #

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 [email protected] js-sidebar" data-sidebar-prevent-scroll="body">
  <!-- sidebar content here -->
</aside>

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.