I’m trying to create a navigation sidebar for my app that can have children. I have tried sidebar with dropdown, sidebar with expander containing buttons but none of these can quite fit what I had in mind. I want a sidebar that can have categories, these categories, when clicked on it can expand and show pages of my app. Is there a way I can do this? The closest thing I found on the internet is streamlit-sidemenu. This component meets all my requirements but isn’t pretty enough. Is there something I could use that’s both pretty and can do what I want it to do?
Hi @Ralghs,
You could try the following components:
- Hydralit navbar: hydralit-components · PyPI
- Option Menus (2 combo): streamlit-option-menu · PyPI
- You could even try the pivot option of aggrid (v.0.3.3) (which has the css option to beautify it). A min working code example for this is given below:
import streamlit as st
import pandas as pd
from st_aggrid import GridOptionsBuilder, AgGrid
st.set_page_config(layout = "wide")
st.markdown('<style>[data-testid="stSidebar"] > div:first-child {width: 312px;}</style>', unsafe_allow_html=True,)
df=pd.DataFrame({ "Category": ['Fruit', 'Fruit', 'Vegetable', 'Fruit', 'Vegetable' ], "Item": ['Oranges', 'Pears', 'Cabbage', 'Grapes', 'Carrot']})
gb = GridOptionsBuilder()
gb.configure_column(field="Category", rowGroup=True)
gb.configure_column(field="Item", header_name="Item", rowGroup=True)
gb.configure_grid_options(tooltipShowDelay=0, pivotMode=True, autoGroupColumnDef=dict(minWidth=100,
cellRendererParams=dict(suppressCount=True), headerName='MyGrp'))
with st.sidebar:
dta = AgGrid(df, gridOptions=gb.build(), height=250)
Cheers