Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
Utilities✨ Premium

Sidebar Collapse

Sidebar that follows the available room: icons only below a 350 px container, a 140 px column with labels above, 200 px from 500 px.

CSS@containerSidebar

Updated

Sidebar Collapse — preview ▶ Free account: live preview + 1 free effect

This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Utilities has 43 effects, including 3 free. Explore the category →

View in catalogue

3 usage examples

Postelian — folder bar of a mail client widened by its corner — Sidebar Collapse example 1

① Postelian — folder bar of a mail client widened by its corner

WhenA mail client window: folders on the left, message list on the right. Dragging the corner moves the bar from icons (narrow window) to the Inbox, Search, Contacts, Settings labels, then to a roomier 200 px column once the window passes 500 px.
WhyUsers pick their window size; the bar makes the most of it with no setting or button.
SettingsRoot filling the window (298 to 510 px), no rounding, #0f1722 background, active link rgba(56,189,248,.18); .wsb-main holds the message list. The corner belongs to the scene (mouse or arrow keys); for the capture the window widens on its own between 300 and 512 px.
Velquor — the same account menu in the page and in a shortcuts widget — Sidebar Collapse example 2

② Velquor — the same account menu in the page and in a shortcuts widget

WhenCustomer area: on the left, the account menu (My profile, Invoices, Bookings, Settings) with its labels next to the personal details; on the right, a 136 px “Shortcuts” widget reuses the same menu, icon-only, above the count of new invoices.
WhyThe same component serves as the main navigation and as a compact shortcut, depending on the room it gets in the page.
SettingsTwo roots: 370 px (140 px column) and 136 px (icons). Light theme set by the scene: white background, #faf8f5 bar, active link #ffe4e6 / #9f1239.
Mirabeline nursery — parents' area that narrows when help opens — Sidebar Collapse example 3

③ Mirabeline nursery — parents' area that narrows when help opens

WhenA nursery's parents' area: My day, Children, Schedule, Settings menu and today's figures. The “Help” button opens a 150 px panel inside the frame: the menu's area drops from 370 to 220 px and the bar goes back to icons; on closing, the labels return.
WhyOpening a neighbouring panel does not break the navigation: it compacts instead of cutting its labels.
SettingsRoot in a 1fr 0px → 1fr 150px grid; #ffedd5 bar, active link #fdba74. The “Help” button is the scene's; for the capture it is replayed every 1.4 s.

How it works

The .fx-0762-root element is the queried container (container: wsb-side / inline-size). It holds a two-column .wsb-layout grid: the <nav class="wsb-panel"> bar (one .wsb-item link per entry, SVG icon and <span class="wsb-label">) and the .wsb-main area where your content goes. There is no button and no state: only the root's width decides.

Below 350 px the grid is 40px 1fr: the bar shows icons only, labels are hidden from sight but still read. From 350 px the column grows to 140 px and the labels show; from 500 px it grows to 200 px and the links get larger (0.8 rem, 8 × 10 px padding). Switching columns animates over 0.4 s (grid-template-columns). A label too long for its column ends with an ellipsis instead of overflowing.

The small script moves aria-current="page" to the clicked link, once per root even if the code is pasted twice. It is optional: on a multi-page site, set the attribute on the server.

Accessibility

  • Links named at every width: in icon mode labels are hidden from sight (1 px box), not removed: “Search, link” is read even in the 40 px column. Icons carry aria-hidden="true".
  • Real links: <a href> inside a <nav aria-label>, current page marked with aria-current="page". In Safari, Tab only stops on links with Option+Tab or the macOS keyboard setting.
  • Visible focus: 2 px #a78bfa outline drawn inside the link (−2 px offset) so it stays visible in the narrow column.
  • In icon mode, no tooltip is provided: if your icons are not self-explanatory, add a title to each link or keep the root above 350 px.
  • Reduced motion: under prefers-reduced-motion: reduce, the column changes width at once and hover fades are removed.

Browser compatibility

Container queries (Chrome 105, Firefox 110, Safari 16); animating grid-template-columns needs Chrome 107 or Safari 16 (before that, the change is instant). Measured in Chromium 151, Firefox 153 and WebKit 26.5: 40 px column up to 349 px, 140 px from 351 to 499 px with whole labels (“Settings” fits), 200 px from 501 px; two copies independent on click, tap and Enter; 0 errors.

Chrome 105+✓ Full (measured); transition from 107
Firefox 110+✓ Full (measured)
Safari 16+✓ Full (measured in WebKit)
Edge 105+✓ Full; transition from 107
Mobile iOS 16+✓ Full
Android Chrome 105+✓ Full; transition from 107

Without container queries, the bar stays icon-only (40 px column) at every width; links stay named for screen readers and work.

The code

HTML structure to paste into your page (the CSS + JS come with your purchase):

index.html — structure 
<div class="fx-0762-root">
  <div class="wsb-layout">
    <nav class="wsb-panel" aria-label="…">
      <a class="wsb-item" href="#…" aria-current="page">
        <svg aria-hidden="true">…</svg>
        <span class="wsb-label">…</span>
      </a>
      <a class="wsb-item" href="#…">…</a>
    </nav>
    <div class="wsb-main">…</div>
  </div>
</div>

One-time payment, no subscription — the code is yours forever

Customize

Options passed to the API or data-* attributes:

Option / propertyDefaultEffect
Breakpoints (CSS — @container wsb-side (min-width: 350px) and (min-width: 500px)) 350 px labels, 500 px wide column Put the first one where your longest label fits in the column.
Column widths (CSS — grid-template-columns on .wsb-layout) 40 px, then 140 px, then 200 px Change the three values; the narrow column must stay ≥ 40 px for 16 px icons.
Entries (HTML — .wsb-item) Home, Search, Profile, Settings One link per entry with its icon and its .wsb-label; aria-current="page" on the current page.
Content (HTML — .wsb-main) “Main content”, centred Put your page in it; switch it to display: block for column content.
Minimum height (CSS — min-height on .wsb-layout) 140 px Give the root and the grid height: 100% to fill a window or a panel.
Colours (CSS) Bar rgba(255,255,255,.05), links rgba(255,255,255,.6), active rgba(139,92,246,.2) Replace them on .wsb-panel, .wsb-item and .wsb-item[aria-current].
Transition (CSS — transition on .wsb-layout) 0.4 s, cubic-bezier(.4,0,.2,1) Remove it for an instant switch; reduced motion already removes it.

FAQ

Sidebar Toggle opens with a button the user presses. Here there is no button: the bar follows on its own the room the page gives it (window, column, neighbouring panel).
The effect does not include one, but changing the root's width is enough (for instance a class giving it width: 220px): the bar follows by itself, with no other setting.
Yes: place the root in that column. Below 350 px it stays icon-only, even on a big screen, since it only looks at its own width.