Custom navbar

Using Streamlit
1

I have been looking for a way to build custom navbar, but still having native streamlit multi-page routing.

There are plenty of options:

  1. custom component
  2. hydralit (as I understand it creates “root” application that serves streamlit pages)
  3. st.page_links with custom styling
  4. adding fully custom navbar, e.g. from bootstrap

I finally ended up with option 3 - as it seemed to me the most “lightweight”. I also wanted to avoid custom component in iframe, and wasn’t ready to refactor the application for hydralit. But I am not saying it is the best option and wish to try other options too.

I see that custom styling (in a stylable_container way) has very big potential. Wonder if streamlit team plans to include native “styling” for components.

Do you have any experiences, recommendation you would like to share?

My navbar looks like this

image
image1920×1076 58.2 KB

2

Hi @mat-b

Recently, there’s st.navigation however this creates a sidebar navigation.

A while back, I created a tutorial video for a hacky approach using CSS customization:

As for requesting for a new feature on a horizontal navigation bar, perhaps you could file a feature request via GitHub issues:

Hope this helps!