🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Responsive Sidebar

Responsive sidebar container.

Copy: View demo

Dependencies

All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only 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.

Here's a quick tutorial that shows how to combine the Responsive Sidebar with other components:

✅ Project duplicated

✅ Project created

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