Layout with sidebar

The eds-l-with-sidebar component is a generic, CSS only, layout utility. Use it to create responsive 2 column layouts where 1 column is a sidebar with a chosen optimal width and the other takes up the remaining space.

This layout automatically wraps into a single column. It will do this based on a chosen minimum width for the non-sidebar element. You provide a percentage for the minimum width, removing the need for media query breakpoints. It is based on Every Layout's sidebar.

Demo

<div class="eds-l-with-sidebar">
    <div class="eds-l-with-sidebar__sidebar">
        <p>sidebar content</p>
    </div>
    <div>
        <p>main content</p>
    </div>
</div>

When to use this component

Use the eds-l-with-sidebar component to:

• create a 2 column layout where one column has a fixed or optimal width and the other is fluid
• build responsive layouts that adapt from 2 columns to one without media queries
  For more on how to use 2 column layouts, go to the layout guidelines.

When not to use this component

Do not use this component when:

• you need more than 2 columns, use eds-l-grid instead
• all columns need to be an equal width, use eds-l-cluster or eds-l-grid instead

How it works

Installation

To install the components, go to the get started guide for developers.

npm install @springernature/elements

Styles

Import the styles into your scss file:

@import '../path/to/node_modules/@springernature/elements/components/eds-l-with-sidebar';

Usage

Add the eds-l-with-sidebar class to a wrapper element. Place 2 child elements inside, one with the eds-l-with-sidebar__sidebar class for the sidebar column and one for the main content. By default the sidebar appears on the right. To place it on the left, put the sidebar element first in the DOM.

Custom settings

The component's layout values are exposed as CSS custom properties, so if needed you can override them inline without changing the component's source styles.

<div class="eds-l-with-sidebar" style="--with-sidebar--gap: 2rem">
    <div style="--with-sidebar--min: 66.666%">
        Main content
    </div>
    <div class="eds-l-with-sidebar__sidebar" style="--with-sidebar--basis: 300px">
        Sidebar content
    </div>
</div>

In this example the gap is 2rem, the layout wraps when main content goes below 66.666% of the available width, and the sidebar is 300px wide in the 2 column layout.

Help improve this page

If you have a question, idea, or suggestion to improve this component or guidance, post in the #ask-elements Slack channel or the #ask-elements Teams channel.