Streamlit Navbar

šŸ’¬ Show the Community!
21

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

22

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

great work!

1 Like
23

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
24

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
25

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!

26

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

27

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!

28

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.

29

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

30

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,

image
image1910Ɨ398 29.5 KB

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

hide_streamlit_markers=False
31

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!!

32

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?

33

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.

34

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

35

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

2 Likes
36

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

37

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">
<li>
<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 = """
<style>
.css-1vq4p4l.e1fqkh3o4{
padding:4rem 0 1.5rem 1.5rem;
}
.navbar-nav>li>.dropdown-menu.show{
background:#081407!important;
color: purple;
}
.dropdown-item{
padding-left: 0.5rem 1.9rem!important;
}
footer{
visibility:hidden
}
</style>
"""
st.markdown(styl, unsafe_allow_html=True)

2023-03-05_103404