Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abhijithvijayan/react-minimal-side-navigation
Minimal side navigation component for React
https://github.com/abhijithvijayan/react-minimal-side-navigation
react side-navigation
Last synced: about 2 months ago
JSON representation
Minimal side navigation component for React
- Host: GitHub
- URL: https://github.com/abhijithvijayan/react-minimal-side-navigation
- Owner: abhijithvijayan
- License: mit
- Created: 2020-10-29T09:52:31.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-11-21T11:08:26.000Z (10 months ago)
- Last Synced: 2024-07-05T14:05:30.342Z (3 months ago)
- Topics: react, side-navigation
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-minimal-side-navigation-example-y299d?file=/src/components/NavSidebar.jsx
- Size: 104 KB
- Stars: 67
- Watchers: 3
- Forks: 29
- Open Issues: 11
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: license
Awesome Lists containing this project
README
react-minimal-side-navigation
🙋♂️ Made by @abhijithvijayan
❤️ it? ⭐️ it on [GitHub](https://github.com/abhijithvijayan/react-minimal-side-navigation/stargazers) or [Tweet](https://twitter.com/intent/tweet?text=Check%20out%20react-minimal-side-navigation%21%20by%20%40_abhijithv%0A%0AMinimal%20side%20navigation%20component%20for%20React%0Ahttps%3A%2F%2Fgithub.com%2Fabhijithvijayan%2Freact-minimal-side-navigation%0A%0A%23react%20%23sidenavigation%20%23library%20%23javascript%20%23typescript) about it.
## Table of Contents
- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
- [Issues](#issues)
- [🐛 Bugs](#-bugs)
- [LICENSE](#license)
## Demo
> https://codesandbox.io/s/react-minimal-side-navigation-example-y299d
## Installation
Ensure you have [Node.js](https://nodejs.org) 10 or later installed. Then run the following:
```
# via npm
npm install react-minimal-side-navigation
# or yarn
yarn add react-minimal-side-navigation
```
## Usage
```js
import React from 'react';
import {Navigation} from 'react-minimal-side-navigation';
import 'react-minimal-side-navigation/lib/ReactMinimalSideNavigation.css';
function App() {
return (
<>
{
// maybe push to the route
}}
items={[
{
title: 'Dashboard',
itemId: '/dashboard',
// you can use your own custom Icon component as well
// icon is optional
elemBefore: () => ,
},
{
title: 'Management',
itemId: '/management',
elemBefore: () => ,
subNav: [
{
title: 'Projects',
itemId: '/management/projects',
// Requires v1.9.1+ (https://github.com/abhijithvijayan/react-minimal-side-navigation/issues/13)
elemBefore: () => ,
},
{
title: 'Members',
itemId: '/management/members',
elemBefore: () => ,
},
],
},
{
title: 'Another Item',
itemId: '/another',
subNav: [
{
title: 'Teams',
itemId: '/management/teams',
},
],
},
]}
/>
>
);
}
```
## API
#### items
Type: `array`
Navigation items to render.
#### activeItemId
Type: `string`
Currently selected item id.
#### onSelect
Type: `function`
Called when item is clicked.
## Issues
_Looking to contribute? Look for the [Good First Issue](https://github.com/abhijithvijayan/react-minimal-side-navigation/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22good+first+issue%22)
label._
### 🐛 Bugs
Please file an issue [here](https://github.com/abhijithvijayan/react-minimal-side-navigation/issues/new) for bugs, missing documentation, or unexpected behavior.
[**See Bugs**](https://github.com/abhijithvijayan/react-minimal-side-navigation/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22type%3A+bug%22)
### Linting & TypeScript Config
- Shared Eslint & Prettier Configuration - [`@abhijithvijayan/eslint-config`](https://www.npmjs.com/package/@abhijithvijayan/eslint-config)
- Shared TypeScript Configuration - [`@abhijithvijayan/tsconfig`](https://www.npmjs.com/package/@abhijithvijayan/tsconfig)
## License
MIT © [Abhijith Vijayan](https://abhijithvijayan.in)