New Component: Streamlit Navigation Bar

Custom Components
, , ,
22

Hi @ilya.peysakhov, it’s not silly at all.

I wouldn’t compare the navbar to st.tabs nor the sidebar. It’s more like a highly stylized st.radio. This recently added documentation page explains it in detail:

But basically, the navbar returns the page selected by the user, and you can set conditions to execute your code according to the returned page.

In the future I wish to change it to function more like the sidebar. However, I’m waiting for two things:

  1. The new API for MPA.
  2. Learn how to solve the issues when using the Streamlit structure (demonstrated on the same page from the quote).
1 Like
23

Got it. My 2 cents is the sidebar style is advantages because you get the best of both worlds with running a page independently of another one, but you also can keep other code at the top of the app to be used across all pages (like API auth, sessions, etc). So being able to move around pages even though everything is in 1 file would be great.

Thanks for the detailed explanation!

1 Like
24

Hey community,

I’ve been utilizing this new component for some time now and I’m eager to integrate its navigation bar feature into my existing app. In my app, I employ AWS Cognito for user authentication, handling logins and logouts. I’m curious if anyone has explored incorporating a logout and login button on the top left corner of the navigation bar, along with displaying user identification (username). Has anyone attempted this yet?

Thank you!

2 Likes
25

Can we have title such as “Guest feedback dashboard” in the middle of this navbar. Also navbar thats fixed at the top to the screen.

26

Hi @Diro,

The navbar component can’t place a title in the middle, but it can place it on the left, as an SVG logo. Which, may or may not be clickable, depending on your preference. From the docs:

logo_page : str or None , default="Home"
The page value that will be returned when the logo is selected, if there is one. Defaults to "Home" . For a non-clickable logo, set this to None.

If that doesn’t meet your needs, you can open a feature request.

What do you mean by “fixed at the top to the screen”?
Right now the navbar component is already fixed at the top, i.e. when you scroll down it stays visible at the top of the window. Later I plan to turn this into an option that can be toggled on or off. The opposite state would be styled with the following CSS:

position: absolute;  /* instead of position: fixed; */

To make it go away with the rest of the body when you scroll down the page.

1 Like
27

Thanks for the clarification :slight_smile:

1 Like
28

Question, is there a predefined function that adjusts the navbar position when the sidebar is expanded, ensuring the navbar items remain visible and do not get hidden behind the sidebar? I’m trying to replicate this with injecting JS, but running into trouble

29

Hi @skyline,

Unfortunately the navbar doesn’t have this feature yet. I already tried some approaches to get this behavior, but without success. I will leave this as an open feature request though, while I work on the solution.

1 Like
30

It is working with edge as expected, but with firefox 115.9.1esr setting use_padding to True or False makes no difference.

31

Hey I am new to streamlit and found this component a great fit for my usecase. I was able to get it running and it looks nice but i am facing one issue. My app consists of three pages, one is a chat bot interface using st.chat_input and the other 2 are static pages. I am using active styles to highlight the currently active page but whenever i switch from chatbot page to a static page it shows loading which is not that big of an issue the problem is after the switch the chatbot page shows as active even though the page actually displayed is a static page.

If anybody faced this issue or has any clue regarding this it will be helpful.

32

Hi @gabrieltempass , I looking forward to this function. Do you know when this version will be released ?

1 Like
33

Hi @gabrieltempass , This is incredible. Quick issue though. I am unable to customise the options as it returns error: Argument of type “dict[str, bool]” cannot be assigned to parameter “options” of type “bool” in function "st_navbar. Is my implementation incorrect?

image
image1402×200 22.7 KB

image
image2730×865 187 KB

34

That is just pylance trying to check types where it shouldn’t It is irrelevant for the execution of the code.

36

This is just what I needed. Thanks! Looking forward to the addition of the dropdown navigation menu :crossed_fingers:

1 Like
38

I’ve got the same issue.
Additionally, every time I switch to another page, the top right menu pops up, displaying a distracting loading message that shifts the entire navigation bar downward.

39

The local version of the app works fine, but I’m facing issues when deploying it to Google Cloud using a Docker container. Has anyone else experienced the same issue?

40

hi
i want that when the navigation bar renders for the first time, a default selection should be there.
as an example, there are option in nav bar “A”, “B”, “C”
i want that, “B” should be selected at initial rendering time and it will look like it is selected with hovered effect

41

Thats an awesome component. One thing to ask. Could it be some how different when open in mobile? Everythng is squized as per picture attached. There is no pan.

Screenshot_20240914_130407_Chrome
Screenshot_20240914_130407_Chrome1080×2400 138 KB

42

super useful!! thank you!

43

When are you looking to update it to work with newest streamlit version? thanks!