New Component: Streamlit Navigation Bar

Streamlit Navigation Bar

Hi everyone!

I felt the need for a navigation bar for Streamlit apps and was not satisfied with the current solutions. So I created a component that allows anyone to place a navbar in their app. These are the guidelines I tried to follow:

  • Be simple to use
  • Look great out of the box
  • Apply custom styles
  • Integrate with Streamlit’s UI
  • Have a well-written documentation

It has some cool functionalities, like displaying an optional logo and external URLs. It also matches the active theme by default.

Below are some demos using the component. I hope people find it useful!

Installation

To install it, run:

pip install streamlit-navigation-bar

Basic example

Here is a basic code example and its output:

import streamlit as st
from streamlit_navigation_bar import st_navbar

page = st_navbar(["Home", "Documentation", "Examples", "Community", "About"])
st.write(page)

Example 1
[App] [Source]

More examples

Below are two other examples. To avoid having a long post, you can see the code snippets that generated them in their [Source] or in the documentation in the GitHub repository.

An example with a sidebar and applying a custom style:

Example 2
[App] [Source]

An example using a logo, an external URL, multiple pages with content, among other things:

Example 3
[App] [Source]

Contributing

You are welcome to help develop the Streamlit Navigation Bar! There are multiple ways to contribute, such as reporting a bug or requesting a feature. You can also just ask a question, if you want. To submit code for a pull request, make sure to read the guide on how to contribute.

Documentation

Check the complete documentation (with parameters, requirements, roadmap and more) in the GitHub repository:

23 Likes

Hi @gabrieltempass

I agree that this is a super clean navigation bar and the logo is a great bonus.

Amazing job creating this, big kudos! :star::star:

3 Likes

Love it, perfectly blend with streamlit. :laughing:

1 Like

Amazing thank you for the effort!

1 Like

3 Likes

Hi @ferdy, thanks for the suggestion!

My intention was to create a space between the body of the app and the top of the window of 6rem. Because this is the default value used by Streamlit. But thanks to your comment, I noticed that the space from st_navbar was actually 7rem. So I released version 3.1.1 that fixes this and reduces to 6rem. Now this is the output:

And this is Streamlit’s default space (for comparison):

I also added a new feature to the component. It is an option that can be passed in the options parameter:

options = {
    "use_padding": True
}

When "use_padding" is set to True, which is the default, it will position the body at 6rem from the top (if the navbar has a default height). But when set to False, it will remove the space and place the body right below the navbar.

For those who want to use more or less space, I recommend combining this option with putting one or more st.write("") before the content of the body. Each write command with an empty string will add 1rem of space.

4 Likes

Great component. Request others should also try Hydralit Navbar - Custom Streamlit Component Responsive Navbar, which is already available for this purpose. Now we have two components to choose from. Thanks. :grinning:

Thank you for this component! I wonder why is my nav component showing up so low from the window top?

I’m just doing this:

        pages = ["Chatbot 🤖", "Chat with Documents 📖"]

        page = st_navbar(pages, selected=pages[default_id])

Hi @Odrec, thanks for your message!

Could you open a bug report about this?

It would help me reproduce the behavior you mentioned and understand why this is happening. Please, be sure to fill the “Debug info” section.

Once the bug report is opened, we can continue our conversation there, and spare this forum post from our eventual back-and-forth messages to resolve the issue.

1 Like

I figured what I was doing wrong. In my app I was initializing language and verifying cookies before loading the navbar and for some reason that was affecting its position. So now I do it after instantiating the navbar and now it’s on the right position.

1 Like

Can support for Sub Menu?

@tuanvuvo do you mean a navbar with a dropdown menu?

Kapture 2024-04-20 at 18.09.00

Like this bootstrap demo? If so, this feature is already on the roadmap. However, I can’t give you an estimated date for when this will be done. If this is not what you mean, please explain in more detail.