streamlit-option-menu is a simple Streamlit component that allows users to select a single item from a list of options in a menu. It provides a static list of options with configurable icons and extensive CSS styling capabilities, offering an alternative to `st.selectbox()` for navigation. The current stable version is 0.4.0, with regular updates and community engagement.
pip install streamlit-option-menuVerified import paths — ran on the pinned version, not inferred.
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.
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.
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.
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.
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.
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.
First, ensure the library is installed: `pip install streamlit-option-menu`. Then, import it using `from streamlit_option_menu import option_menu`.
Ensure `default_index` is an integer value between `0` and `len(options) - 1`, inclusive. For example, `default_index=0` for the first item.
Assign a unique string to the `key` parameter for each `option_menu` component, e.g., `option_menu(..., key="unique_menu_1")`, `option_menu(..., key="unique_menu_2")`.
Refer to the `streamlit-option-menu` documentation to confirm the correct function signature and available keyword arguments (e.g., ensure you use `orientation` instead of `direction`).