Streamlit Navigation Bar

A component that allows you to place a navigation bar in your Streamlit app.

The navbar was built to:

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

Installation

Open a terminal and run:

pip install streamlit-navigation-bar

Example

Here is a basic example of how to use it:

import streamlit as st
from streamlit_navigation_bar import st_navbar

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

[App] [Source]

Jump to the examples gallery to see more demos of what the navbar is capable of.

Documentation

The complete documentation is on the GitHub Wiki. There, you can check:

• API reference
  • Usage
  • Parameters
  • Returns
  • Styles
    • Document Object Model
    • CSS variables
    • Default style
    • Maximum width
  • Options
• Multipage
  • Streamlit's structure
  • Recommended structure
• Examples
• Roadmap

Requirements

To use the navigation bar component in your Streamlit app, you will need:

• Python >= 3.8
• Streamlit >= 1.33
• Streamlit Theme >= 1.2.3
• The CSS adjustment depends on the browser compatibility with the :has pseudo-class

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, or join the discussions in the community forum. To submit code for a pull request, make sure to read the guide on how to contribute.

References

The Streamlit Navigation Bar was made with:

• The streamlit-component-vue-vite-template, by @gabrieltempass
• The st-theme component, by @gabrieltempass

And based on:

• The streamlit-option-menu component, by @victoryhb
• The styleable container, by @LukasMasuch