Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rc-material-sidebar

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-material-sidebar

rc material sidebar

  • 1.0.2
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
1
Weekly downloads
 
Created
Source

rc-material-sidebar

rc-material-sidebar is a lightweight React component designed to streamline the implementation of a sidebar navigation system with support for collapsing and expanding views. This component is ideal for applications requiring a sidebar that can toggle between a compact (collapsed) and expanded state, enhancing user experience and optimizing screen real estate.

Installation

You can easily install rc-material-sidebar via your packeage manager.

npm install rc-material-sidebar
yarn add rc-material-sidebar

Usage

import Sidebar from "rc-material-sidebar";
const items = [
  {
    key: "1", //unique
    label:"First Menu"
    link:"/yourpath"
    icon:<MailIcon/>//material icon
  },
  {
     key: "2", //unique
    label:"Second Menu" // have childrens
    icon:<MailIcon/>//material icon
    children:[
      {
        key: "3", //unique
        label:"child menu one"
        link:"/yourpath"
        icon:<MailIcon/>//material icon
      },
      {
        key: "4", //unique
        label:"child menu two"
        link:"/yourpath"
        icon:<MailIcon/>//material icon
      }
    ]

  }
];
const onClick = (e, item) => {
  console.log(e, item)
}
return (
  <Sidebar
    items={items}
    variant={open ? "full" : "mini"}
    onClick={onClick}
    //
  />
);

Features

Collapse and Expand : Easily switch between a compact (collapsed) and expanded view of the sidebar. Flexible Integration: Seamlessly integrate into React applications to enhance navigation functionality. Customizable: Configure appearance and behavior to suit your application's design and user experience needs.

FAQs

Package last updated on 13 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc