Streamlit Navbar

Oww i get your idea, thank you so much for your response and amazing work. @Probability

Im really glad that my minor mini project became an idea for something bigger!

great work!

1 Like

In theory combining the two doesn’t seem like something hard, you can rebuild the navbar as you wish, and make it behave / work / look as you wish, due to it not being based on streamlit, its just a simple html with some redirections.


If i undestand you idea , it’s possible to have a fixe navbar?
by fixe navbar, i mean : Each time we click in a new item in menu , the navbar goes down then up,

1 Like

Hello! Thanks for your great work!

But i’m having a problem with the streamlit rerun() feature, every time it’s triggered I got the Exception ‘Please use the main app.’
Do you have any workaround on this?

Thanks again!

The application needs 2 ports.
1 is for the “Backend” which is the streamlit app, and 1 is for the “Frontend” which is the HTML page with the navbar, in order to use the navbar, you need to open the port with the frontend, which is the port on which the flask app runs with the navbar.

you are getting the “Please use the main app” because you are trying to access the streamlit app directly, in which situation the navigation function searches for the route, and does not get any.


Awesome component, thanks for all your work.

I had one question - when using sticky nav, I am unable to access the Streamlit menu - it’s normally available by clicking the 3 horizontal lines in the top right of the page, but with sticky_nav set to True, the menu is not accessible. Unless I’m missing something, which is definitely a possibility!

When using sticky mode, the Streamlit menu has to be hidden, as it takes up a horizontal strip that would make the navbar sit lower. It’s the trade off of using the sticky mode. I experimented with putting the navbar over it, but then if you have too many menu entries, the hamburger would mix with the menu items and create an issue.

I figured that something like that was probably the case. Appreciate the response.

No problem, it’s funny, I’m partial to using the navbar in non-sticky mode, as I like to fill the space above with a banner, but everyone’s got different tastes :cowboy_hat_face:

It’s mainly because i wrote the navbar to use with the Hydralit framework and it has the ability to automatically insert a banner over the auto generated navbar in the constructor for the parent app.

    app = HydraApp(
        title='Secure Hydralit Data Explorer',
        #add a nice banner, this banner has been defined as 5 sections with spacing defined by the banner_spacing array below.
        use_banner_images=["./resources/hydra.png",None,{'header':"<h1 style='text-align:center;padding: 0px 0px;color:grey;font-size:200%;'>Secure Hydralit Explorer</h1><br>"},None,"./resources/lock.png"], 

Makes this,

This way you can turn the Streamlit hamburger back on by just changing this line,


Hey @Probability , Hydralit is really great component and I have really found it useful. Just 2 questions, is there any way to change the font using CSS hack? I have tried some things but it is not working. Another is when the menu is in zoomed in, there is hamburger version of the menu which has a transparent background color. Is there any CSS hack to change that? Please let me know as it would be very helpful!!
Thanks for the great component!!

Hi, I’m trying to publish my application in streamlit cloud but I use hydralit as a library and it is giving me a problem to publish my app, it tells me that it does not recognize the library as such, what can I make a friend?

Please DM me the details and I’ll be happy to help, it definitely works in streamlit cloud, so sounds like something about the environment.

Hi @Probability and all,

Hydralit looks amazing. I’ve been playing with the demo sample and have a few questions on styling. Is it possible to style the menu tabs:

  • As rectangular highlights like this?
  • Change the text color on mouse hover.
  • Change the selected menu highlight color.
  • Pin the menu fixed to the top and covers the entire width of the page?
  • Adjust the top and bottom padding of the menu to make it shorter and tighter at the top?

Thinking of using Hydralit for a project. Any insight or comment is appreciated.


1 Like

As another very nice option which is not mention in this useful thread: GitHub - victoryhb/streamlit-option-menu


i have a question. i made navbar. but the existing multi pages are gone.
Can’t I use navbar and multi pages together?

how to modify the font-size and background only dropdown-menu when navbar in sidebar?
I want to modify the submenu style so it different with menu.
I use st.markdown(“style”,unsafte) to setting, the menu didn’t have any change!

<ul class="dropdown-menu show">
<a class="dropdown-item" href="#NaN" data-toggle="tooltip" data-placement="top" data-html="true">
<i class="fa fa-users"></i> Sub-item 1</a></li>
<li><a class="dropdown-item" href="#NaN" data-toggle="tooltip" data-placement="top" data-html="true">
<i class=""></i>🤣 Sub-item 2</a></li>
<li><a class="dropdown-item" href="#NaN" data-toggle="tooltip" data-placement="top" data-html="true"><i class="fa fa-database"></i> Sub-item 3</a></li></ul>
styl = """
padding:4rem 0 1.5rem 1.5rem;
color: purple;
padding-left: 0.5rem 1.9rem!important;
st.markdown(styl, unsafe_allow_html=True)


I will leave my contribution here too!

I created a navbar component with these guidelines in mind:

  • Be simple to use
  • Look great out of the box
  • Apply custom styles
  • Integrate with Streamlit’s UI
  • Have a well-written documentation

It has some cool functionalities, like displaying an optional logo and external URLs. It also matches the active theme by default.

To install it, run the command:

pip install streamlit-navigation-bar

Here is a basic example of usage:

import streamlit as st
from streamlit_navigation_bar import st_navbar

page = st_navbar(["Home", "Documentation", "Examples", "Community", "About"])

And its output:

Example 1
[App] [Source]

Check the complete documentation (with parameters, examples, requirements, roadmap and more) in the GitHub repository: