Sidebar

Import#

import { Sidebar } from '@volue/wave-react';

Background#

The sidebar layout creates two content panels inside a containing element. These two panels stack vertically, until there is enough horizontal space for them to sit side-by-side horizontally. One content panel is narrower than the other, acting as a "sidebar".

Sidebar layout exists simultaneously in one of the two configurations: horizontal and vertical. Which configuration is adopted is dependent entirely on the space it is afforded when placed within a parent container.

As there are no viewport media queries involved, the sidebar layout will nest nicely inside other containers.

Examples#

Default configuration#

In the example below Sidebar wraps when the wide panel starts to take up less than 50% of the available horizontal space.

Media object#

The placing of an item of media next to a description. The sidebar/image is 15rem wide in the horizontal configuration. Uses the default contentMin “breakpoint” of 50% and an increased gap value.

Switched media object#

The same as the last example, except the text accompanying the image is the sidebar.

Form elements#

Sidebar layout is applicable to all sorts of content. In the following example it is used to align buttons with form inputs (where the button forms the sidebar and has an intrinsic, content-based width).

API Reference#