react-simple-sidebar v1.0.2

react-simple-sidebar

react-simple-sidebar provides a simple but customizable Sidebar component that enables you to quickly implement a sidebar so that you can focus on building the rest of your React application.

Usage

This project aims to be minimalistic in its API implementation & as-unopinionated-as-possible with styles so that you can customize the sidebar to meet your needs.

By default, the <Sidebar> component already renders a clickable menu icon to toggle the sidebar, and manages the visibility state. Thus, children is the primary prop that will need to be configured to render what content you would like inside the sidebar. However, the current API allows you to provide custom functionality & styles. The API is outlined below.

import { Sidebar } from "react-simple-sidebar";

export const Page = () => {
  return (
    <>
      <Sidebar>
        <div>Main</div>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/blog">Blog</a></li>
        </ul>

        <hr />

        <ul>
          <li><a href="/login">Login</a></li>
          <li><a href="/signup">Sign Up</a></li>
        </ul>
      </Sidebar>
    </>
  );
}

API

Dependencies

react-simple-sidebar is a simple implementation of the shadcn Sheet component, and thus is built with TailwindCSS. Customization and usage of the sidebar assumes that your application is also built with Tailwind.

Need Help?

Please submit any issues to the project here, and/or tweet me @professorragna.