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.

2 Likes

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!

Hey,
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.

cheers

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',
        favicon="🐙",
        hide_streamlit_markers=True,
        #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"], 
        banner_spacing=[5,30,60,30,5],
        use_navbar=True, 
        navbar_sticky=False,
        navbar_animation=True,
        navbar_theme=over_theme,
    )

Makes this,

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

hide_streamlit_markers=False

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.

Thanks,
AndyW

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

2 Likes