# @visual-framework/vf-sidebar > vf-sidebar component Latest version **1.0.0** (published 2025-02-25) · Apache 2.0 license · 0 weekly downloads ## Install ```sh npm install @visual-framework/vf-sidebar pnpm add @visual-framework/vf-sidebar yarn add @visual-framework/vf-sidebar bun add @visual-framework/vf-sidebar ``` ## Health **Score 25/100 (F)** — status: maintenance-mode. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2025-02-25 | | First published | 2021-03-29 | | Weekly downloads | 0 | | License | Apache 2.0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 32.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | VF | | Maintainers | sandykadam, ebiwebdev, khawkins98, pacope92, bhushan-ebi | | Keywords | fractal, component | ## Links - npm: https://www.npmjs.com/package/@visual-framework/vf-sidebar - Issues: https://github.com/visual-framework/vf-core/issues - npm.io page: https://npm.io/package/@visual-framework/vf-sidebar ## Recent versions - 1.0.0 (latest) — 2025-02-25 - 1.0.0-alpha.2 — 2021-03-29 ## README # vf-sidebar component [![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-sidebar.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-sidebar) ## About The `vf-sidebar` is a media query—less layout component that will alter the layout from inline to block depending on set parameters. ## Usage You can apply the `vf-sidebar` layout when you have two columns of content with one (if needed) being smaller than the other. When the browser width is small enough so that the 'main' content does not have enough space to be inline with the 'sidebar' it will make both pieces of content act and look like 'block' elements, stacked on top of each other. By default the width of the main content is set at `50%` but can be changed with the CSS custom property `--vf-sidebar-main-width` which, if using nunjucks can be changed with the yaml key `sidebar__main_content_width`. Even thought the `vf-sidebar` layout has a default spacing design token applied as a CSS custom property fallback it is good practice in the system to use and decalre the spacing CSS class name in your project. ✅ `
...
` ❌ `
...
` ### Class Names | Class Name | description | usage | | ------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | `vf-sidebar` | The layout components default Class | needs to be used once on instances of the `vf-sidebar` layout component | | `vf-sidebar--start` | Expects the first child element to be the smallest | | | `vf-sidebar--end` | Expects the last child element to be the smallest | | | `vf-sidebar--Nn` | Determines the spacing of the layout when the components are inline or stacked (`Nn` refers to the spacing value) | | ### CSS Custom Properties | CSS Custom Property | Description | | ----------------------- | -------------------------------------------------------------------------------------------------------------------------- | | --vf-sidebar-main-width | can be used inline on the parent to determine when the layout changes. It sets a minimum width on the larger child element | | --vf-sidebar-spacing | sets the spacing between the gitwo child elements. This is set using a class name `vf-sidebar--Nn` | ### Nunjucks and Yaml Key/Value Pairs | `nunjucjs`/`yaml` key | `nunjucjs`/`yaml` value | description | | --------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | sidebar__position | left | use when the smallest width content (sidebar) is on the left or at the start | | sidebar__position | start | use when the smallest width content (sidebar) is on the start or at the left | | sidebar__position | right | use when the smallest width content (sidebar) is on the right or at the end | | sidebar__position | end | use when the smallest width content (sidebar) is on the end or at the right || | sidebar__spacing | 400 | gives the space of 1rem between the two child elements | | sidebar__spacing | 600 | gives the space of 1.5rem between the two child elements | | sidebar__spacing | 800 | gives the space of 2rem between the two child elements | | sidebar__main_content_width | Nn% | sets the CSS custom property `--vf-sidebar-main-width` on the `vf-sibebar` parent which sets the maximum space the larger width content needs to be before switching from an inline layout to a block layout. This is set in the CSS as 50% by default | ## Install This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and [yarn](https://classic.yarnpkg.com/en/docs/install), you can install `vf-sidebar` with this command. ``` $ yarn add --dev @visual-framework/vf-sidebar ``` ### Sass/CSS The style files included are written in [Sass](https://sass-lang.com/). If you're using a VF-core project, you can import it like this: ``` @import "@visual-framework/vf-sidebar/index.scss"; ``` Make sure you import Sass requirements along with the modules. You can use a [project boilerplate](https://stable.visual-framework.dev/building/) or the [`vf-sass-starter`](https://stable.visual-framework.dev/components/vf-sass-starter/) ## Help - [Read the Visual Framework troubleshooting](https://stable.visual-framework.dev/troubleshooting/) - [Open a ticket](https://github.com/visual-framework/vf-core/issues) - [Chat on Slack](https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ) --- _Source: https://npm.io/package/@visual-framework/vf-sidebar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._