Ever get frustrated that making changes to streamlit’s native makes your app look buggy. Changing the background color flashes from its current color to your choice and it takes some time to render before the effect shows. Even worse if you use st.markdown as it remounts on every new page or sometimes rerun.
Also the ability to change the title and icon of the page cannot be done NATIVELY in app. There are other components that provide this functionality like st-pages.
In addition to components like this is streamlit-custom-sidebar which allows you to build a sidebar with your ideal features from the very start of the app’s render. It uses javascript to build the sidebar and the extras component switch_page to change pages but can also switch pages via url (clicking on link) to give the server rendering page effect.
Features:
- Set page name and icon programatically including the order of pages
- Can ask component to keep sidebar closed on page render and it won’t do the “streamlit thing” of first showing as open then closing.
- Built using streamlit’s native sidebar animation and css.
- Can change in script/.py document:
- background color of sidebar
- active navigation tab click color
- hover over navigation tab color
- text and icon color and font size and distance between the two
- Icon libraries that can be used in this component:
In essence, to use this create a .streamlit/config.toml file and input:
[ui]
hideSidebarNav=true
or start streamlit app with
streamlit run app.py --ui.hideSidebarNav=true
The only downside is you cannot append streamlit components to the sidebar or if you do, it pretty much brings in streamlit’s native sidebar which makes the component messy. I have found some way to append components to it but need to build it out - will work on during the month and update you all but in the process of buidling my start-up so please bear with me.
Future features:
- Append streamlit components to sidebar
- Dynamically add new pages based on conditions
- Redirect to desired page
- Possibility to build your very own sidebar instead of using this template with your your own rules (dont get too hype over this as the rules will be fairly basic).