# @xal3xfx/reactbar > > Navigation bars for React applications. Latest version **1.1.2** (published 2026-07-23) · MIT license · 0 weekly downloads ## Install ```sh npm install @xal3xfx/reactbar pnpm add @xal3xfx/reactbar yarn add @xal3xfx/reactbar bun add @xal3xfx/reactbar ``` ## Health **Score 65/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 1.1.2 | | Published | 2026-07-23 | | First published | 2022-08-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=10 | | Dependencies | 3 | | Unpacked size | 198.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Alex Petrov | | Maintainers | xal3xfx, xderty, b.a.borisov | | Keywords | react, reactjs, navbar, sidebar, navigation, menu, nav, bar | ## Links - npm: https://www.npmjs.com/package/@xal3xfx/reactbar - Repository: https://github.com/xal3xfx/reactbar - npm.io page: https://npm.io/package/@xal3xfx/reactbar ## Dependencies (3) - [lodash.clonedeep](https://npm.io/package/lodash.clonedeep.md) ^4.5.0 - [lodash.isfunction](https://npm.io/package/lodash.isfunction.md) ^3.0.9 - [lodash.isequalwith](https://npm.io/package/lodash.isequalwith.md) ^4.4.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.1.2 (latest) — 2026-07-23 - 0.1.1-12 (next) — 2022-08-18 - 1.1.1 — 2026-07-10 - 1.1.0 — 2026-07-09 - 1.0.6 — 2024-10-11 - 1.0.5 — 2024-10-11 - 1.0.4 — 2024-10-08 - 1.0.3 — 2023-03-27 - 1.0.2 — 2023-01-16 - 1.0.1 — 2023-01-12 - 1.0.0 — 2023-01-12 - 0.3.5 — 2023-01-10 - 0.3.4 — 2023-01-10 - 0.3.3 — 2022-11-23 - 0.3.2 — 2022-11-11 - … 23 more at https://npm.io/package/@xal3xfx/reactbar/versions ## README # reactbar > Navigation bars for React applications. ## Dependencies > react >= 16 ## Table of contents - [Project Name](#project-name) - [Dependencies](#dependencies) - [Table of contents](#table-of-contents) - [Getting Started](#getting-started) - [Usage](#usage) - [Contributing](#contributing) - [Built With](#built-with) - [Versioning](#versioning) - [Authors](#authors) - [License](#license) ## Installation ### npm ```sh $ npm install @xal3xfx/reactbar ``` ### yarn ```sh $ yarn add @xal3xfx/reactbar ``` # Usage ## SidebarOld The **SidebarOld** is a wrapper for your application. Put all of your components inside the **SidebarOld**. > Recommended to have `height: 100%` on **html** and **#root** and no `margin` on **body**. ```css body{ margin: 0; } html, #root{ height: 100%; } ``` ## Desktop | Expanded | Collapsed | |----------------------------------------------------------------------------------|------------------| | ![img_1.png](https://github.com/xAl3xFx/reactbar/blob/master/img_1.png?raw=true) | ![img.png](https://github.com/xAl3xFx/reactbar/blob/master/img.png?raw=true) | ## Mobile | Expanded | Collapsed | |----------------------------------------------------------------------------------|----------------------------------------------------------------------------------| | ![img_3.png](https://github.com/xAl3xFx/reactbar/blob/master/img_3.png?raw=true) | ![img_2.png](https://github.com/xAl3xFx/reactbar/blob/master/img_2.png?raw=true) | ### Example ```typescript jsx import * as React from 'react'; import {SidebarOld, SidebarItem} from "@xal3xfx/reactbar"; import './index.css' const AppSidebar = () => { const items : SidebarItem[] = [ { className: 'fas fa-house', command: () => console.log('home'), label: "Home", children: [ { className: 'fa fa-list', command: () => console.log('info 1'), label: "Info", }, { className: 'fa fa-list', command: () => console.log('info 2'), label: "Info2", } ] }, { className: 'fas fa-search', command: () => 0, label: "Search" } ] return <>

AppSidebar component

 }; const ChildComponent = () => { return <> I am child } export default AppSidebar; ``` > SidebarOld has required `items` property which is of type `SidebarItem[]` and represents the items in the sidebar menu. #### SidebarItem ```typescript interface SidebarItem { className: string; label: string; command: () => void; children?: SidebarItem[] } ``` | Name | Description | Default Value | |------------|---------------------------------------------------------------------------------------------------|---------------| | className | className for the item in the list. You can use it to put icon to the list item. | required | | label | text to display for the item in the list. | required | | command | function callback which is executed when the item in the list is clicked. | required | | children | If you want to have expandable item in the list you should pass children which is `SidebarItem[]` | undefined | ### Props | Name | Description | Default Value | |-----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------| | items | `SidebarItem[]` | required | | topBarElement | Any `JSX.Element` which you want to be displayed on the `Topbar`. | undefined | | onSidebarToggled | Function callback which is executed when the sidebar is clicked. The function accepts on parameter `expanded: boolean` which is true if the sidebar is expanded and false if it is collapsed. | undefined | | topbarStyle | Style for the `Topbar` | undefined | ## Contributing You are welcome to contribute with any new features or buf fixes. ## Built With * [tsdx](https://tsdx.io/) ## Versioning We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags). ## Authors * **Alex Petrov** - *Initial work* - [Alex Petrov - xAl3xFx](https://github.com/xAl3xFx) See also the list of [contributors](https://github.com/xAl3xFx/reactbar/contributors) who participated in this project. ## License [MIT License](https://andreasonny.mit-license.org/2019) © Alex Petrov --- _Source: https://npm.io/package/@xal3xfx/reactbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._