Navigation sidebar

🎈 Using Streamlit
1

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?

2

Hi @Ralghs,
You could try the following components:

  1. Hydralit navbar: hydralit-components · PyPI
  2. Option Menus (2 combo): streamlit-option-menu · PyPI
  3. 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