Sidebar-menu-ui NPM

Sidebar Menu UI

Free simple UI sidebar ready to use.

Demo

Screenshot

Installation

npm

npm i sidebar-menu-ui

Requirement

node versin >= 14
React >= 18
React Router Dom >= 6
sass

Usage

copas Font Awesome in index.html

....
<head>
  ...
  <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
  ...
</head>

Create code. Example :

import { BrowserRouter, Route, Routes } from 'react-router-dom'
import Sample from './Sample'

    <BrowserRouter>
        <Routes>
            <Route path="*" element={<Sample />} />
        </Routes>
    </BrowserRouter>

    const menu = [
                    {
                        heading: 'Core',
                    },
                    {
                        icon: <i className="fas fa-tachometer-alt"></i>,
                        name: 'Dashboard',
                        href: '/dashboard',
                    },
                 ]
    for (let index = 1; index < 20; index++) {
      if (index % 4 === 0) x.push({ heading: `Layout Core ${index / 4}` })
      menu.push({
        icon: <i className="fas fa-columns"></i>,
        name: `Layout ${index}`,
        href: `/layout-${index}`,
        subMenu: [
          {
            name: 'Menu 1',
            href: '/menu-1',
          },
          {
            name: 'Menu 2',
            href: '/menu-2',
          },
        ],
      })
    }

import { SidebarContainer, SidebarProvider, useSidebar } from 'sidebar-menu-ui'
import 'sidebar-menu-ui/dist/scss/main.scss'

    <SidebarProvider>
        <SidebarContainer
            title={{ name: 'hello world', href: '/dashboard' }}
            menu={menu}
            navbar
            navbarRight={<>lorem ipsum</>}
        >
            <Routes>
            <Route path="/" element={<Navigate to="/dashboard" />} />
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="*" element={<Test />} />
            </Routes>
        </SidebarContainer>
    </SidebarProvider>;

Custom Styling

There are sets of sass variables available which you can override to define your own styles

You need to include your override variables before importing the scss file

Your custom.scss file should look something like this

// Your variable overrides
$background-color-sidebar: red;


@import 'node_modules/sidebar-menu-ui/dist/scss/main.scss';

Available scss variables

$background-color-sidebar: #212529 !default;
$background-color-footer: #343a40 !default;
$font-color-sidebar: rgba(255, 255, 255, 0.5) !default;
$font-color: white !default;

$sidebar-width: 225px !default;
$header-height: 56px !default;
$padding-content: 1.5rem !default;

Example Menu

Heading

{
    heading: 'Core',
},

Single Menu

{
    icon: <i className="fas fa-tachometer-alt"></i>,
    name: 'Dashboard',
    href: '/dashboard',
},

Sub Menu

{
    icon: <i className="fas fa-columns"></i>,
    name: 'Layout 1',
    href: '/layout-2',
    subMenu: [
        {
            name: 'Menu 1',
            href: '/menu-1',
        },
        {
            name: 'Menu 2',
            href: '/menu-2',
        },
    ]
},

API

License

classnames prop-types

@infinitebrahmanuniverse/nolb-sid @everything-registry/sub-chunk-2757

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago