New Component: Streamlit Navigation Bar

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

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

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!


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.

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

Thanks for the clarification :slight_smile:

1 Like

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

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

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