Hydralit Navbar - Custom Streamlit Component Responsive Navbar

Hi All, just a quick message to announce that with a new release of the Hydralit package for multi-page application management, we now have a dedicated custom navbar component that can be used directly (no Hydralit) or within Hydralit.
Hydralit Components
Features include

  • Full theme color support
  • Full container support (can put on sidebar too)
  • Responsive layout
  • Use Bootstrap icons or emojis or nothing
  • Configure Response values when clicked
  • Assign tooltips

12 Likes

Hello @Probability,

Nice component here, i was playing around with the navbar component and discovered that when on mobile view the menu_id is not really responsive, this is what i mean, is their a way the menu_id can be hidden on mobile view and the menu_id would show at the sidebar for moblie users.

I hope you understand.

If I understand what you mean, this is related to the way the Bootstrap Navbar (which is what this is using underneath) responds when completely collapsed. Basically the Navbar expands to fill the span of the Streamlit container, therefore even in mobile view, the Streamlit container doesn’t get small enough for the Bootstrap Navbar to switch to only using the icons for the menu. For example, as I shrink the window, the Streamlit container has a minimum width that holds the menu from getting any smaller. So it is responsive, it can only respond within the container Streamlit gives it though.

Start

Shrink

Smallest I can shrink it

ohhhh myyy godddd, this is fckn*** amazing!
I really like the top nav bar. Even tho i think the code req. to implement it is a bit to much.
Maybe one thing in my opinion to improve.

1 Like

Thanks, appreciate it. I am curious though as to what you mean by the code req to implement? The ability to configure any part of the menu will always mean more code, in this case more items in a single Python dictionary. I’m not sure how much less code to create a navbar would be acceptable.

For example, if you just want a navbar with 5 items, it is this tiny amount of code, including the package import statement.

import hydralit_components as hc

menu_data = [
    {'label':"Left End"},
    {'label':"Book"},
    {'label':"Component"},
    {'label':"Dashboard"},
    {'label':"Right End"},
]

menu_id = hc.nav_bar(menu_definition=menu_data)

st.info(f"{menu_id=}")

That piece of code with nothing else, generates this,

1 Like

use hydralit need to keep touch with internet?
can we use it offline without internet?
thank you.

@BeyondMyself the Hydralit package can be used offline. Using the Hydralit Components package offline, depends. Specifically, it uses JQuery and BootStrap and link to the public cdn sources as is common practise. If you have been online while using the package and then go offline, it will still work, as the sources are cached in your browser, until you clear your cache ofcourse. Interesting question though, as I will add a note for the next release to provide an option to ensure the required files are available even if offline.

Hi, my test is on a server machine without connection to the internet,
so it did not run success yet.
is there have method to make it run success in an offline environment?
can we download the jquery and bootstrap file and put them on the same folder with python program?

This is fantastic @Probability!

I’ve shared internally and will try it! :slightly_smiling_face:

Best,
Charly

Thanks for the confirmation, I’ll release an update soon, as this isn’t something I imagined as a common use case. For now, you can work completely offline by turning off the Hydralit Navbar, within your HydraApp parent app. Set this parameter to False and it will work offline just fine. As this parameter was added to Hydralit when the Navbar was added to ensure backwards compatibility.

image

Hi All, everyone has been very supportive and made some great feature requests, I’m happy to announce the next release of the Hydralit Navbar with some very sort after features.

New features!

  • Enable sticky menu mode (pin to top of the window)
  • Animated dropdown menu entries to support complex navigation
  • Offline support
  • Added support for fontawesome icons
  • Full collapse in mobile view (the burger is back!)

hydralit_navbar_new1

The existing feature set is still available:

  • Full theme color support
  • Full container support (can put on sidebar too)
  • Responsive layout
  • Use Bootstrap icons or emojis or nothing
  • Configure Response values when clicked
  • Assign tooltips

Feel free to continue providing great suggestions, in the meantime enjoy the new and improved navbar with full animation, responsiveness and theme support as well as override.

1 Like

Hi all, thanks for putting together an incredibly useful component.

I was wondering whether there is a way to activate a specific tab within the code?

My use case: I have the navbar in the main section of the page, with a bunch of tabs that take user input (and store them in session state). I have a button on the sidebar that kicks off a function that does some stuff with the user inputs. I then have a results tab which displays the outputs of the function when the user clicks on that tab. But I’d like to automatically select the results tab within the function, so that when the user kicks off the function they are automatically shown the results, and I can’t figure out a way to do so. Is it feasible?

Thanks. I had a similar use case a while back, the documentation for the Hydralit Components has fallen way behind how much is available already.

For your case, you can use the first_select parameter, which is an index, 0 is the first item, 10 the second, 20 the third and so on. The reason it’s two digits is if you have a dropdown menu and that is the second item on the menu and you want to select the third item on that dropdown, then the index would be 13, (10 for the dropdown root, 3 for the third item on the dropdown).

For you, you want something like this:

override = st.selectbox('Menu override',[31,10,20,30,31,32,33,40,0,81])
menu_id = hc.nav_bar(menu_definition=menu_data,key='PrimaryNav',first_select=override)

When you change the value of first_select (from override) and rerun, the navbar will return the value of the selected index, for example, if you run the above (and put correct indexes in for your menu definition), when you change the selection in the selectbox, the navbar will automatically select that index and return the value specified in the navbar(either the id or just the label depending on what you gave it), basically a way to puppet the navbar from another widget. Hope that helps. Make sure to update to the latest version 1.0.5.

1 Like

Hello @Probability Thank you so much. I have a question how I can change the navigation bar color ? as it is pink

1 Like

The only problem i have with these components is the issue of them #NOT loading as fast as other streamlit components render on user interface.

I will try out thou

The reason it is red is the navbar picks up the theme colors from Streamlit. If you create a custom theme as per the Streamlit instructions here, the navbar will automatically changes colour.

If you want to change any of the colors on the navbar without changing the Streamlit theme colors, you can pass a dictionary that specifies exactly what color each part of the navbar should be, see the example below.

#this is how to override any color in the navbar
import hydralit_components as hc

over_theme = {'txc_inactive': 'purple','menu_background':'red','txc_active':'yellow','option_active':'blue'}

menu_id = hc.nav_bar(
    menu_definition=menu_data,
    override_theme=over_theme,
)
1 Like

The same can be said for ANY of the custom components developed for Streamlit, so you can either ask Streamlit to implement all these components natively, improve the speed of their entire custom component implementation or just don’t bother using these components.

It’s comments like this, are why I’ve almost completely stopped developing and sharing my work with the community.

2 Likes

As another component maintainer who also gets GitHub issues and Twitter DMs about slow components like every 2-3 weeks, I second this, we really are doing our best as component creators to work around the speed limitations of hosting frontend code inside an iframe.

It is a subject that has been brought and documented multiple times, the team is thinking of other design possibilities (like shadow DOMs) to ease the work of component creators.

@kareemrasheed89 if you have speed issues with components and want to build constructive feedback, feel free to post a Github issue on Issues · streamlit/streamlit · GitHub with what you would expect in an ideal world and possibly other design ideas if you want to help improve on this. Otherwise this component is your best bet for multipage + navbar and will stay so for a long time.

Have a nice day,
Fanilo

3 Likes

I really do not have any issue with custom component. I was only pointing out issues I got most time and this is a general information.

Apologies if this sound discouraging.

Regards,

Rasheed Abdulkareem

(Bsc, MOS, MCP, NIMRA)

D2C56FB1042A422181E5458DBC9646AB.jpg

A930ABBBC32C454F8E75A2B8FB0E59E5.jpg

41850F81D84F4F949E23C92263D7B66C.jpg

1 Like

Well, my comment is not to discourage or rubbish custom components. I am only trying to share my feel about custom components generally. Don’t be annoyed @probability, keep sharing your works

2 Likes