🎉 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 built upon the CodyHouse Framework.

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>

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 are used together. 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.

The component includes CSS custom properties to help you set the sizing of the sidebar:

:root {
  // default -> sidebar controlled by button (optimized for smaller screens)
  --sidebar-width: 100%;
  --sidebar-max-width: 380px;

  // static variation -> sidebar is always visible (optimized for bigger screens)
  --sidebar-static-width: 100%;
  --sidebar-static-max-width: 380px;
  --sidebar-static-height: 100vh;
  --sidebar-static-min-height: 0;
}

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