# 📁 Yew Sidebar
[](https://crates.io/crates/yew-sidebar)
[](https://crates.io/crates/yew-sidebar)
---
| Example | Demo | URL |
| --- | --- | --- |
| Basic |  | [](https://yew-sidebar.netlify.app/) |
| X Clone |  | [](https://yew-sidebar-x.netlify.app/) |
| Youtube Clone |  | [](https://yew-sidebar-youtube.netlify.app/) |
---
## 📜 Introduction
Yew Sidebar is a powerful and responsive sidebar component for the Yew framework. It provides a feature-rich sidebar that can be easily integrated into your Yew applications.
## 🤔 Why is this Component Useful?
This sidebar component offers several benefits to enhance your web application's navigation experience:
1. 🌐 Customization: Tailor the appearance and behavior of the sidebar to suit your application's design.
1. 🚀 Responsive Design: Ensures optimal viewing and navigation across various devices and screen sizes.
1. 💬 Easy Integration: Seamless integration into Yew projects with minimal setup and configuration.
## ⚙️ Installation
Integrating Yew Sidebar into your Yew project is a straightforward process. Follow these steps:
1. Make sure you have Yew set up in your project. If not, refer to the [Yew documentation](https://yew.rs/docs/getting-started/introduction) for installation instructions.
1. Install the library using your preferred package manager:
```bash
$ cargo add yew-sidebar
```
1. Start using the sidebar component to enhance your application's navigation.
## 🛠️ Usage
Incorporating Yew Sidebar into your application is easy. Follow these steps:
1. Import the sidebar component into your Yew project:
```rust
use yew::prelude::*;
use yew_sidebar::{Sidebar, SidebarProps, MenuItem};
#[function_component(App)]
pub fn app() -> Html {
// Tailwind css utility classes
let toggle_icon_collapsed = html! {
};
let toggle_icon_expanded = html! {
};
let sidebar_props = SidebarProps {
sider_collapsed: true,
title: "Dashboard",
menu_items: vec![
MenuItem {
icon: html! {
},
text: "Overview",
link: "#overview",
class: "",
title: "",
submenus: vec![],
},
MenuItem {
icon: html! {
},
text: "Analytics",
link: "#analytics",
class: "",
title: "",
submenus: vec![],
},
MenuItem {
icon: html! {
},
text: "Reports",
link: "#reports",
class: "",
title: "",
submenus: vec![],
},
],
width_collapsed: "w-20",
toggle_icon_expanded: toggle_icon_expanded,
toggle_icon_collapsed: toggle_icon_collapsed,
width_expanded: "w-72",
padding_collapsed: "p-2",
padding_expanded: "p-4",
display_collapsed: "hidden",
display_expanded: "flex",
justify_content: "flex-col",
align_items: "items-start",
height: "h-screen",
background_color: "bg-gray-800",
font: "text-white",
icon_color: "yellow",
button_border_radius: "rounded-md",
button_background_color: "bg-blue-600",
button_width: "w-3/4",
button_height: "h-10",
..SidebarProps::default()
};
html! {
}
}
```
1. Customize the sidebar appearance and behavior using provided props.
1. Enjoy an enhanced navigation experience with Yew Sidebar.
## 🔧 Props
### Main Props
| Name | Type | Default Value | Description |
| ---------------------- | --------------- | ------------------- | ------------------------------------------------- |
| `fixed` | `bool` | `false` | Set whether the sidebar is fixed. |
| `sider_collapsed` | `bool` | `false` | Initial collapsed state of the sidebar. |
| `menu_items` | `Vec