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
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.
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?
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.
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!
The existing feature set is still available:
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.
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.
Hello @Probability Thank you so much. I have a question how I can change the navigation bar color ? as it is pink
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,
)
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.
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
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)
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
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.