Bento & Layout
Sticky Sidebar + Scrolling Content
Pinned sidebar with its own internal scroll next to a scrolling main content column, desktop only.
$ velocityx add sticky-sidebar-layoutBuilt for astro.
Full docs for Sticky Sidebar + Scrolling Content →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Getting started
Section 1 of the scrolling docs body — the sidebar stays pinned at a 16px offset while this column scrolls underneath it.
Section 2 of the scrolling docs body — the sidebar stays pinned at a 16px offset while this column scrolls underneath it.
Section 3 of the scrolling docs body — the sidebar stays pinned at a 16px offset while this column scrolls underneath it.
Section 4 of the scrolling docs body — the sidebar stays pinned at a 16px offset while this column scrolls underneath it.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| as | 'div' | 'section' | No | 'div' | |
| sidebarSide | 'left' | 'right' | No | 'left' | |
| sidebarWidth | string | No | '280px' | |
| stickyTopOffset | string | No | '24px' | |
| gap | 6 | 8 | 10 | 12 | No | 10 | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/sticky-sidebar-layout/StickySidebarLayout.astroUsing the Sticky Sidebar + Scrolling Content component
Install it with velocityx add sticky-sidebar-layout.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Bento & Layout.
Reserves a stable aspect ratio for media to prevent layout shift, using the native CSS aspect-ratio property.
astroBreakpoint-free responsive card grid using CSS grid auto-fit/minmax, column count is purely a function of container width.
astroSingle card shell component with five variants (icon, stat, image, chart-slot, quote) sharing one accessible article shell.
astroResponsive 4-cell bento grid, 1 column on phone and 2x2 on tablet/desktop, with four named slots.
astro