Streamlit Navbar

Show the Community!
1

While we are waiting for an official navbar, I’ve created a simple app to show how can you create a navbar by yourself.

To be more specific, a way to embed streamlit app, inside an HTML page, and navigate inside the app using a bootstrap navbar.

Ideally, i would wrap it with flask.

Demo:
snapshot

Code:

21 Likes
2

great- something i have been waiting for a while.

:+1: :+1:

2 Likes
3

Very interesting solution, looks great!

1 Like
4

Good stuff!
I’m very excited if at some point we can freely choose between using the st.sidebar(left or right) or a navbar like this when you need something a little more website-like.
But this is a super nice example of how it could work together :slight_smile:

1 Like
5

Eagerly waiting for official st.navbar.

6 Likes
6

Super Userinterface. I have created a pakage for creating multipage app. Happy to get feedback

Checkout github for example

show

7

Looks awesome, but if i may ask

If you press on the button, will it kill the current process? because that’s why i’ve used a wrapper, when paginating with an IFRAME, the process get’s killed AFAIK, so if a heavy process is runnig, the navigation will take time.

1 Like
8

Simply, it will run the selected app/page.

As per my understanding of your question,
if you are on page1, upon clicking page2 it will forget page1(You have to use session state)
pls, ask me if I misunderstood your question.

9

Yeah, i will try to elaborate a bit more,

When using the navbar ive “created” when you swtich between the views, the previous one gets just down immidiatly, due the fact that its a ridirect, and as far as i understood, the proccess also gets killed, so the navigation is really fast.

When i trying to make something with tabs from inside streamlit, the application took time to first finish her run (for example if if had like 10 sec proccess going, the app would first need to finish running it, and only after that, the redirection would accure).

1 Like
10

Yes. if you click on the button it will stop the previous process/app.

I created this to show my different apps with sharable link/url of the page.

11

Stand alone Navbar custom component that can be used directly for what it’s worth, Hydralit Components, as simple as;

import streamlit as st
import hydralit_components as hc

# specify the primary menu definition
menu_data = [
        {'icon': "far fa-copy", 'label':"Left End"},
        {'id':'Copy','icon':"🐙",'label':"Copy"},
        {'icon': "far fa-chart-bar", 'label':"Chart"},#no tooltip message
        {'icon': "far fa-address-book", 'label':"Book"},
        {'id':' Crazy return value 💀','icon': "💀", 'label':"Calendar"},
        {'icon': "far fa-clone", 'label':"Component"},
        {'icon': "fas fa-tachometer-alt", 'label':"Dashboard",'ttip':"I'm the Dashboard tooltip!"}, #can add a tooltip message
        {'icon': "far fa-copy", 'label':"Right End"},
]
# we can override any part of the primary colors of the menu
#over_theme = {'txc_inactive': '#FFFFFF','menu_background':'red','txc_active':'yellow','option_active':'blue'}
over_theme = {'txc_inactive': '#FFFFFF'}
menu_id = hc.nav_bar(menu_definition=menu_data,home_name='Home',override_theme=over_theme)

    
#get the id of the menu item clicked
st.info(f"{menu_id=}")

Features include

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

Or you can use a full-blooded Streamlit multi-app framework package Hydralit, but everyone’s got a multi-app package and navbar now, so whatever you’re more comfortable with, still love your work @BugzTheBunny !

7 Likes
12

I am really enjoying Hydralit, but looking to get a clean look with the nav-bar flush against the top of the page. I’m aiming for something similar to GitHub - BugzTheBunny/streamlit_navbar: An example of how to make an streamlit app with a navbar.

There is probably a css hack; any ideas?

13

Glad you’re enjoying it, thanks! Funny you should ask, as I’m currently working on the next release of Hydralit and the Hydralit Components (including Navbar) and a new feature will be exactly what you are asking. Here is a video demonstrating how the navbar will become stuck to the top, even when scrolling. At the ~15 second mark, i toggle the parameter in the Hydralit constructor that will make the navbar stick to the top and you can see it snap to the top and stay there, so yes, it’s possible and coming soon!

Hydralit Sticky Navbar

6 Likes
14

Amazing! I’ll keep an eye out for it.

1 Like
15

This looks so freaking good as a navbar(loving the icon choice as well) without having to resort to the sidebar.
Could you share a video or gif how it looks like when resized to a mobile screen? Curious if all the nav items will work well this way :slight_smile:

1 Like
16

Thank you so much for sharing. I will use on my current project.

17

This comment might help the dev team as well to maximize performance when switching views/tabs for the official navbar.
For me ideally a combination of the performance of the navbar @BugzTheBunny made and the look of @Probability would be the perfect navbar.

Enabling theming on a performant navbar would solve it all since we would then have a fast navbar and let people themselves decide if they want a clean and simple look or one with icons/different colors/animations.

But that’s Streamlit dream level stuff :star_struck:

1 Like
18

Hi @Fhireman, @mkleinbort @Manal_Benchrif , As previously mentioned, I’ve been working on a new release, why wait for the dream level stuff! The new features appear to be what everyone was waiting for, sticky nav, animated dropdown menus and full responsive collapse using the burger, a few more things but these are the main ones.

@BugzTheBunny, thanks for the inspiration, wanting to recreate your navbar while staying in Streamlit was the primary motivation for this update, that and I hated not having animated dropdown menus!

All locked and loaded, just pip the update and you’re good to go, pip install -U hydralit_components

hydralit_navbar_new1

Update post here.

5 Likes
19

Thank you so much for your hard work, this release is really amazing.
I test it and it work very well . I’m use it in my current project and it’s really helpful.

  1. Please i have a suggestion if you can make it true. Each time we click in a new item in menu , the navbar goes down then up, it will be more ideal and perform if the navigation bar remains fixed.

  2. Also please can you make a documentation how to create the sub items i really need it in my project as soon as possible.

Again thank you so much for your creativity

20

Thanks, glad it works, was a fair bit of work to get Streamlit to play nice. To answer your questions;

  1. I can’t change that movement behaviour, as it’s Streamlit itself that is injecting a page divider upon every refresh action, sorry, there are limits to what i can get Streamlit to stop showning.

  2. I have alot of code examples on the readme page of the repo, specifically at the bottom is a good example of creating sub-menus. GitHub - TangleSpace/hydralit_components: A responsive Navbar component for Streamlit and Hydralit.

2 Likes