https://github.com/opensass/sidebar

🗃️ A sidebar component for WASM frameworks.
https://github.com/opensass/sidebar

css dioxus rust sidebar tailwindcss yew

Last synced: 11 months ago
JSON representation

🗃️ A sidebar component for WASM frameworks.

• Host: GitHub
• URL: https://github.com/opensass/sidebar
• Owner: opensass
• License: mit
• Created: 2024-01-26T08:23:57.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2025-05-12T16:29:35.000Z (about 1 year ago)
• Last Synced: 2025-06-17T22:39:56.714Z (12 months ago)
• Topics: css, dioxus, rust, sidebar, tailwindcss, yew
• Language: Rust
• Homepage: https://docs.rs/sidebar
• Size: 343 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


# 🗃️ Sidebar

[![Crates.io](https://img.shields.io/crates/v/sidebar)](https://crates.io/crates/sidebar)

[![Crates.io Downloads](https://img.shields.io/crates/d/sidebar)](https://crates.io/crates/sidebar)

![Crates.io License](https://img.shields.io/crates/l/sidebar)

[![made-with-rust](https://img.shields.io/badge/Made%20with-Rust-1f425f.svg?logo=rust&logoColor=white)](https://www.rust-lang.org/)

[![Rust](https://img.shields.io/badge/Rust-1.85%2B-blue.svg)](https://www.rust-lang.org)

[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/wiseaidev)

[![Join our Discord](https://dcbadge.limes.pink/api/server/b5JbvHW5nv)](https://discord.gg/b5JbvHW5nv)

![logo](https://raw.githubusercontent.com/opensass/sidebar/refs/heads/main/assets/logo.webp)



## 🎬 Demo

| Framework | Live Demo |

| --- | --- |

| Yew | [![Netlify Status](https://api.netlify.com/api/v1/badges/a0efc7e9-f20e-4dd9-93e1-c8f4fde7506f/deploy-status)](https://sidebar-rs.netlify.app) |

| Dioxus | TODO |

| Leptos | TODO |

## 📜 Intro

Sidebar is a **highly optimized**, **feature-rich** sidebar component built for **WASM-based frameworks** like **Yew**, **Dioxus**, and **Leptos**. It supports nested menus, user profiles, collapsibility, submenus, badges, and full styling control.

## 🤔 Why Use Sidebar?

These standout features make Sidebar the best choice for any WASM UI:

1. **🎛️ Full Customization**: Every part, menu items, header, logo, profile, layout, is styleable via props.

1. **🧱 Modular Design**: Use only the pieces you need: `Sidebar`, `Menu`, `MenuItem`, `Submenu`, `Profile`, or `Logo`.

1. **🔁 Dynamic Interaction**: Update the selected menu item using `UseStateHandle` or attach `on_logout` handlers.

1. **🧩 Composable**: Nest submenus, inject icons, or toggle visibility based on context.

1. **📐 Accessible UI**: Designed with screen readers in mind.

## Yew Usage

Refer to [our guide](https://github.com/opensass/sidebar/blob/main/YEW.md) to integrate this component into your Yew app.

## 🧬 Dioxus Usage (TODO)

Refer to [our guide](https://github.com/opensass/sidebar/blob/main/DIOXUS.md) to integrate this component into your Dioxus app.

## 🌱 Leptos Usage (TODO)

Refer to [our guide](https://github.com/opensass/sidebar/blob/main/LEPTOS.md) to integrate this component into your Leptos app.

## 🤝 Contributions

Contributions are welcome! Whether it's bug fixes, feature requests, or examples, we would love your help to make Sidebar better.

1. Fork the repository.

1. Create a new branch for your feature/bugfix.

1. Submit a pull request for review.

## 📜 License

Sidebar is licensed under the [MIT License](LICENSE). You are free to use, modify, and distribute this library in your projects.