# Sidebar Accordion Menu
A Streamlit custom component that creates beautiful sidebar accordion menus with page navigation support.
## Installation
```bash
pip install streamlit-sidebar-accordion-menu
```
## Quick Start
Create a simple multi-page Streamlit app with an accordion menu.
### Project Setup
Here’s the recommended directory structure for your Streamlit app when use this component.
```
root/
├── app.py # Main entry point (Home page)
├── pages/ # All subpages go here
│ ├── sales_dashboard.py
│ ├── user_analytics.py
│ ├── general_settings.py
│ └── advanced_settings.py
└── .streamlit/
└── config.toml # Optional config to hide Streamlit's default nav
```
#### Notes
* `app.py`: This is your main app file. It defines the overall layout and the sidebar menu. You can name it anything(e.g., main.py, home.py, etc.).
* `pages/` directory: Place all your subpage scripts here. The component automatically resolves paths like "sales_dashboard" to pages/sales_dashboard.py.
* `.streamlit/config.toml`: To disable Streamlit’s default page navigation, set
```toml
[client]
showSidebarNavigation = false
```
Now you're ready to build!
### 1. Main App File
```python
import streamlit as st
from sidebar_accordion_menu import sidebar_accordion_menu
st.set_page_config(
page_title="My App",
layout="wide",
initial_sidebar_state="expanded"
)
# Simple dictionary format - NEW! 🎉
menu = {
"🏠 Home": None, # None or "home" for main page
"📊 Analytics": {
"Sales Dashboard": "sales_dashboard", # .py extension added automatically
"User Analytics": "user_analytics",
},
"⚙️ Settings": {
"General": "general_settings",
"Advanced": "advanced_settings",
}
}
# Render the accordion menu
sidebar_accordion_menu(menu)
# Your main page content
st.title("Welcome to My App")
st.write("Select a page from the sidebar menu.")
```
### 2. Create Your Pages
Create a `pages` directory and add your page files.
**pages/sales_dashboard.py:**
This is the sample implementation of `sales_dashboard.py`.
Please create the other scripts yourself as needed.
```python
import streamlit as st
from sidebar_accordion_menu import sidebar_accordion_menu
# Use the same menu structure (dict format)
menu = {
"🏠 Home": None,
"📊 Analytics": {
"Sales Dashboard": "sales_dashboard",
"User Analytics": "user_analytics",
},
"⚙️ Settings": {
"General": "general_settings",
"Advanced": "advanced_settings",
}
}
sidebar_accordion_menu(menu)
# Page content
st.title("Sales Dashboard")
st.write("Overview of your sales performance and key metrics.")
# Key metrics
col1, col2, col3 = st.columns(3)
col1.metric("Total Sales", "$10,234", "+12%")
col2.metric("Active Customers", "1,234", "+8%")
col3.metric("Conversion Rate", "4.5%", "+0.3%")
# Sales trend chart
st.subheader("Monthly Sales Trend")
sales_data = {
"Month": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
"Sales": [1500, 1800, 1700, 2100, 2300, 2500]
}
st.line_chart(data=sales_data, x="Month", y="Sales")
# Top products table
st.subheader("Top Selling Products")
st.table({
"Product": ["Product A", "Product B", "Product C"],
"Units Sold": [320, 280, 150],
"Revenue": ["$3,200", "$2,800", "$1,500"]
})
```
## Hiding Default Streamlit Pages
To hide Streamlit's default page navigation, create a `.streamlit/config.toml` file:
```toml
[client]
showSidebarNavigation = false
```
## Features
- 🎨 Clean, modern design
- 📱 Responsive and user-friendly
- ⌨️ Keyboard navigation support
- ♿ Accessibility features (ARIA labels)
- 🚀 Optimized performance
- 🔧 Easy to customize
## Tips
1. **Consistent Menu**: Use the same menu structure across all pages for consistency
2. **Page Organization**: Keep your pages in a `pages/` directory
3. **Icons**: Use emojis or Unicode symbols to make your menu more visual
4. **Auto-detection**: The component automatically detects your main script
## Troubleshooting
### Menu not showing
- Make sure you call `sidebar_accordion_menu()` on every page
- Check that your page files are in the correct location
### Navigation not working
- Ensure page paths are relative to your main app file
- File names must end with `.py`
## License
MIT License - feel free to use in your projects!
Raw data
{
"_id": null,
"home_page": "https://github.com/gussan-me/streamlit_sidebar_accordion_menu.git",
"name": "streamlit-sidebar-accordion-menu",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "streamlit, component, sidebar, menu, navigation, accordion",
"author": "Ayumu Yamaguchi",
"author_email": null,
"download_url": "https://files.pythonhosted.org/packages/0b/b2/7a6e30d9252e6cc6036ac3d47750eb6317f7ade02fcbd6daa5a590cc9098/streamlit_sidebar_accordion_menu-0.0.2.tar.gz",
"platform": null,
"description": "# Sidebar Accordion Menu\r\n\r\nA Streamlit custom component that creates beautiful sidebar accordion menus with page navigation support.\r\n\r\n\r\n\r\n## Installation\r\n\r\n```bash\r\npip install streamlit-sidebar-accordion-menu\r\n```\r\n\r\n## Quick Start\r\n\r\nCreate a simple multi-page Streamlit app with an accordion menu.\r\n\r\n### Project Setup\r\nHere\u2019s the recommended directory structure for your Streamlit app when use this component.\r\n\r\n\r\n```\r\nroot/\r\n\u251c\u2500\u2500 app.py # Main entry point (Home page)\r\n\u251c\u2500\u2500 pages/ # All subpages go here\r\n\u2502 \u251c\u2500\u2500 sales_dashboard.py\r\n\u2502 \u251c\u2500\u2500 user_analytics.py\r\n\u2502 \u251c\u2500\u2500 general_settings.py\r\n\u2502 \u2514\u2500\u2500 advanced_settings.py\r\n\u2514\u2500\u2500 .streamlit/\r\n \u2514\u2500\u2500 config.toml # Optional config to hide Streamlit's default nav\r\n```\r\n\r\n#### Notes\r\n* `app.py`: This is your main app file. It defines the overall layout and the sidebar menu. You can name it anything(e.g., main.py, home.py, etc.).\r\n\r\n* `pages/` directory: Place all your subpage scripts here. The component automatically resolves paths like \"sales_dashboard\" to pages/sales_dashboard.py.\r\n\r\n* `.streamlit/config.toml`: To disable Streamlit\u2019s default page navigation, set\r\n\r\n```toml\r\n[client]\r\nshowSidebarNavigation = false\r\n```\r\n\r\nNow you're ready to build!\r\n\r\n\r\n### 1. Main App File\r\n\r\n```python\r\nimport streamlit as st\r\nfrom sidebar_accordion_menu import sidebar_accordion_menu\r\n\r\nst.set_page_config(\r\n page_title=\"My App\",\r\n layout=\"wide\",\r\n initial_sidebar_state=\"expanded\"\r\n)\r\n\r\n# Simple dictionary format - NEW! \ud83c\udf89\r\nmenu = {\r\n \"\ud83c\udfe0 Home\": None, # None or \"home\" for main page\r\n \"\ud83d\udcca Analytics\": {\r\n \"Sales Dashboard\": \"sales_dashboard\", # .py extension added automatically\r\n \"User Analytics\": \"user_analytics\",\r\n },\r\n \"\u2699\ufe0f Settings\": {\r\n \"General\": \"general_settings\",\r\n \"Advanced\": \"advanced_settings\",\r\n }\r\n}\r\n\r\n# Render the accordion menu\r\nsidebar_accordion_menu(menu)\r\n\r\n# Your main page content\r\nst.title(\"Welcome to My App\")\r\nst.write(\"Select a page from the sidebar menu.\")\r\n```\r\n\r\n### 2. Create Your Pages\r\n\r\nCreate a `pages` directory and add your page files.\r\n\r\n**pages/sales_dashboard.py:**\r\nThis is the sample implementation of `sales_dashboard.py`.\r\nPlease create the other scripts yourself as needed.\r\n```python\r\nimport streamlit as st\r\nfrom sidebar_accordion_menu import sidebar_accordion_menu\r\n\r\n# Use the same menu structure (dict format)\r\nmenu = {\r\n \"\ud83c\udfe0 Home\": None,\r\n \"\ud83d\udcca Analytics\": {\r\n \"Sales Dashboard\": \"sales_dashboard\",\r\n \"User Analytics\": \"user_analytics\",\r\n },\r\n \"\u2699\ufe0f Settings\": {\r\n \"General\": \"general_settings\",\r\n \"Advanced\": \"advanced_settings\",\r\n }\r\n}\r\n\r\nsidebar_accordion_menu(menu)\r\n\r\n# Page content\r\nst.title(\"Sales Dashboard\")\r\nst.write(\"Overview of your sales performance and key metrics.\")\r\n\r\n# Key metrics\r\ncol1, col2, col3 = st.columns(3)\r\ncol1.metric(\"Total Sales\", \"$10,234\", \"+12%\")\r\ncol2.metric(\"Active Customers\", \"1,234\", \"+8%\")\r\ncol3.metric(\"Conversion Rate\", \"4.5%\", \"+0.3%\")\r\n\r\n# Sales trend chart\r\nst.subheader(\"Monthly Sales Trend\")\r\nsales_data = {\r\n \"Month\": [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"],\r\n \"Sales\": [1500, 1800, 1700, 2100, 2300, 2500]\r\n}\r\nst.line_chart(data=sales_data, x=\"Month\", y=\"Sales\")\r\n\r\n# Top products table\r\nst.subheader(\"Top Selling Products\")\r\nst.table({\r\n \"Product\": [\"Product A\", \"Product B\", \"Product C\"],\r\n \"Units Sold\": [320, 280, 150],\r\n \"Revenue\": [\"$3,200\", \"$2,800\", \"$1,500\"]\r\n})\r\n```\r\n\r\n## Hiding Default Streamlit Pages\r\n\r\nTo hide Streamlit's default page navigation, create a `.streamlit/config.toml` file:\r\n\r\n```toml\r\n[client]\r\nshowSidebarNavigation = false\r\n```\r\n\r\n## Features\r\n\r\n- \ud83c\udfa8 Clean, modern design\r\n- \ud83d\udcf1 Responsive and user-friendly\r\n- \u2328\ufe0f Keyboard navigation support\r\n- \u267f Accessibility features (ARIA labels)\r\n- \ud83d\ude80 Optimized performance\r\n- \ud83d\udd27 Easy to customize\r\n\r\n## Tips\r\n\r\n1. **Consistent Menu**: Use the same menu structure across all pages for consistency\r\n2. **Page Organization**: Keep your pages in a `pages/` directory\r\n3. **Icons**: Use emojis or Unicode symbols to make your menu more visual\r\n4. **Auto-detection**: The component automatically detects your main script\r\n\r\n## Troubleshooting\r\n\r\n### Menu not showing\r\n- Make sure you call `sidebar_accordion_menu()` on every page\r\n- Check that your page files are in the correct location\r\n\r\n### Navigation not working\r\n- Ensure page paths are relative to your main app file\r\n- File names must end with `.py`\r\n\r\n\r\n## License\r\n\r\nMIT License - feel free to use in your projects!\r\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "A Streamlit component for creating sidebar accordion menus with navigation support",
"version": "0.0.2",
"project_urls": {
"Documentation": "https://github.com/gussan-me/streamlit_sidebar_accordion_menu/blob/main/README.md",
"Homepage": "https://github.com/gussan-me/streamlit_sidebar_accordion_menu",
"Issues": "https://github.com/gussan-me/streamlit_sidebar_accordion_menu/issues",
"Repository": "https://github.com/gussan-me/streamlit_sidebar_accordion_menu"
},
"split_keywords": [
"streamlit",
" component",
" sidebar",
" menu",
" navigation",
" accordion"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "81242b247403ba286320f18e40507d7ed6d43bd00c2f99493b14202b5e2ecc8c",
"md5": "46eae32fd518d978ae7b545e26d26607",
"sha256": "6b67b1b70081f3867db0f986e556dbef355c57db93a0f625f559cbbf7fda5a19"
},
"downloads": -1,
"filename": "streamlit_sidebar_accordion_menu-0.0.2-py3-none-any.whl",
"has_sig": false,
"md5_digest": "46eae32fd518d978ae7b545e26d26607",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 130710,
"upload_time": "2025-07-13T01:46:55",
"upload_time_iso_8601": "2025-07-13T01:46:55.222143Z",
"url": "https://files.pythonhosted.org/packages/81/24/2b247403ba286320f18e40507d7ed6d43bd00c2f99493b14202b5e2ecc8c/streamlit_sidebar_accordion_menu-0.0.2-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "0bb27a6e30d9252e6cc6036ac3d47750eb6317f7ade02fcbd6daa5a590cc9098",
"md5": "244dd0a1a3d36949410fcc30fc39b4be",
"sha256": "3713470f43c74b0cd08048accc4ddb883d237b8938523e63e91b7711090f1128"
},
"downloads": -1,
"filename": "streamlit_sidebar_accordion_menu-0.0.2.tar.gz",
"has_sig": false,
"md5_digest": "244dd0a1a3d36949410fcc30fc39b4be",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 132101,
"upload_time": "2025-07-13T01:46:56",
"upload_time_iso_8601": "2025-07-13T01:46:56.857712Z",
"url": "https://files.pythonhosted.org/packages/0b/b2/7a6e30d9252e6cc6036ac3d47750eb6317f7ade02fcbd6daa5a590cc9098/streamlit_sidebar_accordion_menu-0.0.2.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-07-13 01:46:56",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "gussan-me",
"github_project": "streamlit_sidebar_accordion_menu",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "streamlit-sidebar-accordion-menu"
}
JSON
