streamlit-navigation-bar

Ensure your environment meets the following requirements:

• Python >= 3.8
• Streamlit >= 1.33
• Streamlit Theme >= 1.2.3
• Browser support for the CSS :has pseudo-class is required for certain CSS adjustments.

To set up the project dependencies and run the development server, use the following commands:

# Install dependencies
npm install

# Start development server with hot-reload
npm run dev

# Type-check, compile, and minify for production
npm run build

The st_navbar function renders a navigation bar in your Streamlit app. It accepts a list of strings representing the page names and returns the name of the currently selected page, which you can use to drive your app's logic (e.g., conditional rendering or state management).

import streamlit as st
from streamlit_navigation_bar import st_navbar

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

The frontend is built with Vue 3 and Vite. For the best development experience in VSCode, use the following extensions:

1. Volar: The official Vue language service (ensure Vetur is disabled).
2. TypeScript Vue Plugin (Volar): To enable TypeScript to recognize .vue file imports.

Performance Tip: Volar Take Over Mode If the TypeScript plugin is slow, you can enable 'Take Over Mode' to improve performance:

1. Open the VSCode command palette and run Extensions: Show Built-in Extensions.
2. Find TypeScript and JavaScript Language Features, right-click it, and select Disable (Workspace).
3. Run Developer: Reload Window from the command palette.

Install the component using pip to add a navigation bar to your Streamlit application.

pip install streamlit-navigation-bar