https://github.com/compostrap/sidebar-menu

:page_with_curl: Simple and fast multi-level sidebar menu on Bootstrap (@twbs)
https://github.com/compostrap/sidebar-menu

bootstrap sidebar-menu

Last synced: 6 months ago
JSON representation

:page_with_curl: Simple and fast multi-level sidebar menu on Bootstrap (@twbs)

• Host: GitHub
• URL: https://github.com/compostrap/sidebar-menu
• Owner: compostrap
• License: mit
• Created: 2019-05-07T05:27:07.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2025-01-22T06:10:07.000Z (over 1 year ago)
• Last Synced: 2025-05-06T17:55:21.041Z (about 1 year ago)
• Topics: bootstrap, sidebar-menu
• Language: SCSS
• Homepage:
• Size: 867 KB
• Stars: 25
• Watchers: 4
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

README

          
## Sidebar menu

Simple and fast multi-level sidebar menu built on Bootstrap 5.

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://raw.githubusercontent.com/compostrap/sidebar-menu/master/license.md)

[![npm version](https://badge.fury.io/js/sidebar-menu-compostrap.svg)](https://badge.fury.io/js/sidebar-menu-compostrap)

[![Build status](https://github.com/compostrap/sidebar-menu/actions/workflows/build.yml/badge.svg)](https://github.com/compostrap/sidebar-menu/actions/workflows/build.yml)

[![CodeFactor](https://www.codefactor.io/repository/github/compostrap/sidebar-menu/badge)](https://www.codefactor.io/repository/github/compostrap/sidebar-menu)

## Installation

```

npm install sidebar-menu-compostrap

```

## Built on

- [Bootstrap 5x](https://getbootstrap.com)

- [Font Awesome 7](https://fontawesome.com)

- [Perfect scrollbar](https://github.com/mdbootstrap/perfect-scrollbar)

- [Nanobar](https://github.com/jacoborus/nanobar)

## Demo

- [Dark](https://compostrap.github.io/sidebar.dark)

- [Dark gradient](https://compostrap.github.io/sidebar.dark.gradient)

- [White](https://compostrap.github.io/sidebar.white)

- [White gradient](https://compostrap.github.io/sidebar.white.gradient)

## Introduction

Simple and fast multi-level sidebar menu built on Bootstrap 5. 

So you should be aware of how Bootstrap itself is used. The advantage is also knowledge of sass, npm.

**The sidebar menu is built on the sidebar skeleton. I recommend you [look at it](https://github.com/compostrap/sidebar-skeleton).**

## Important classes in the menu

See the menu in the template.

| Description                     | Class        |

|---------------------------------|--------------|

| Marks the active item           | link-current |

| Icon animation                  | bell         |

| Marks the drop-down menu icon   | link-arrow   |

| Marks the hidden drop-down menu | list-hidden  |

## Sidebar colors

Colors are the same as bootstrap.

| Color                                                    | Sidebar           | List           | List icons       | Scrollbar           |

|----------------------------------------------------------|-------------------|----------------|------------------|---------------------|

| ![#ffffff](https://placehold.co/15x15/ffffff/ffffff.png) | sidebar-bg-white  | list-bg-white  | -                | scrollbar-bg-white  |

| ![#f8f9fa](https://placehold.co/15x15/f8f9fa/f8f9fa.png) | sidebar-bg-light  | list-bg-light  | -                | scrollbar-bg-light  |

| ![#212529](https://placehold.co/15x15/212529/212529.png) | sidebar-bg-dark   | list-bg-dark   | -                | scrollbar-bg-dark   |

| ![#007bff](https://placehold.co/15x15/007bff/007bff.png) | sidebar-bg-blue   | list-bg-blue   | list-icon-blue   | scrollbar-bg-blue   |

| ![#6f42c1](https://placehold.co/15x15/6f42c1/6f42c1.png) | sidebar-bg-purple | list-bg-purple | list-icon-purple | scrollbar-bg-purple |

| ![#e83e8c](https://placehold.co/15x15/e83e8c/e83e8c.png) | sidebar-bg-pink   | list-bg-pink   | list-icon-pink   | scrollbar-bg-pink   |

| ![#dc3545](https://placehold.co/15x15/dc3545/dc3545.png) | sidebar-bg-red    | list-bg-red    | list-icon-red    | scrollbar-bg-red    |

| ![#fd7e14](https://placehold.co/15x15/fd7e14/fd7e14.png) | sidebar-bg-orange | list-bg-orange | list-icon-orange | scrollbar-bg-orange |

| ![#28a745](https://placehold.co/15x15/28a745/28a745.png) | sidebar-bg-green  | list-bg-green  | list-icon-green  | scrollbar-bg-green  |