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

10 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,

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