---
tags: [gradio-custom-component, sidebar, menu, dashboard]
title: gradio-sidebar-menu
short_description: Custom sidebar menu component for Gradio using gr.HTML
colorFrom: indigo
colorTo: purple
sdk: gradio
pinned: false
app_file: space.py
---

# `gradio-dashboard-menu`
<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20blue">  
<a href="https://huggingface.co/spaces/elismasilva/gradio-sidebar-menu"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a>  
<span>💻 <a href='https://github.com/elismasilva/gradio-sidebar-menu'>Component GitHub Code</a></span>

Custom sidebar menu component for Gradio apps using `gr.HTML` with Lucide icons, collapsible groups, dynamic routing, and full theme support.

Perfect for dashboards, AI creative tools (like image/model generators), or any Gradio app that needs an elegant, responsive side navigation.

## Features and Key Characteristics

- **Collapsible groups** with persistent state (folders stay open even after navigation)
- **Custom colored icons** via Lucide (colors defined in `menu_data`)
- **Light/dark theme support** (uses Gradio's native `--` CSS variables)
- **Animated toggle button** with smooth rotating arrow (< >)
- **Flexible position** (left/right) with correct borders on both sides
- **Responsive** — auto-closes on mobile when selecting an item
- **Events** — `change` (navigation), `expand`, `collapse`
- **No extra dependencies** beyond Gradio + Lucide CDN

## Installation

```bash
pip install gradio-sidebar-menu