Streamlit Option Menu

Warnings

• gotcha The `option_menu` UI may incorrectly refresh to its default state after `st.experimental_set_query_params` is called, even if the underlying selected value remains correct. The UI might not visually reflect the intended selection.
  Fix: Store and retrieve the selected value using `st.session_state` and explicitly pass it as `default_index` if the menu is re-rendered conditionally or after query parameter changes. This ensures the UI state aligns with the session state. Avoid relying solely on query parameters for menu state if UI desynchronization is observed.
• gotcha When deploying Streamlit applications to platforms like Streamlit Cloud, having both `Pipfile` (and `Pipfile.lock`) and `requirements.txt` in your repository can lead to dependency resolution errors where `streamlit-option-menu` is not found. Streamlit prioritizes which dependency file to use.
  Fix: Ensure you use only one dependency management file (`requirements.txt` is generally recommended for simplicity with Streamlit Cloud) and remove the other. If using `Pipfile`, ensure `streamlit-option_menu` is correctly listed and a `Pipfile.lock` is generated.
• gotcha Like most Streamlit components, `streamlit-option-menu` triggers a full app rerun when its value changes. If the component is displayed conditionally or hidden, its value might reset on subsequent reruns if not properly managed.
  Fix: Always store the selected value in `st.session_state` if the menu's visibility or parameters might change, and use `st.session_state` to set the `default_index` on subsequent renders to maintain the selection state.
• gotcha Custom CSS applied via the `styles` parameter might not always behave as expected or interact with the main Streamlit app's CSS. This is because custom components are often rendered within an iframe, isolating their styling from the parent document.
  Fix: Test custom CSS thoroughly within the component's `styles` dictionary. Be aware of the iframe isolation and that external CSS or global Streamlit theming might not directly affect the component's internal elements. For deeper customization, understanding Bootstrap CSS (which the component uses) can be beneficial.
• gotcha The `manual_select` parameter is designed for one-time programmatic selection and behaves like a button. If `manual_select` is constantly set to an index, it can lead to unexpected behavior or prevent user interaction, as the menu will continuously try to re-select that option.
  Fix: Set `manual_select` only when a manual selection is intended, typically within a conditional block or based on an event. Ensure it is not set persistently on every rerun to allow normal user interaction.

Install

• pip install streamlit-option-menu Install with pip

Imports

• option_menu

  from streamlit_option_menu import option_menu

Quickstart

This example demonstrates how to create a vertical navigation menu in the sidebar using `streamlit-option-menu`, displaying different content based on the user's selection.

import streamlit as st
from streamlit_option_menu import option_menu

st.set_page_config(layout="wide")

with st.sidebar:
    selected = option_menu(
        menu_title="Main Menu",  # required
        options=["Home", "Projects", "Contact"],  # required
        icons=["house", "code-slash", "envelope"],  # optional
        menu_icon="cast",  # optional
        default_index=0,  # optional
        orientation="vertical"
    )

if selected == "Home":
    st.title(f"You selected: {selected}")
    st.write("Welcome to the Home page!")
elif selected == "Projects":
    st.title(f"You selected: {selected}")
    st.write("Here are my projects.")
elif selected == "Contact":
    st.title(f"You selected: {selected}")
    st.write("Contact me here.")