DOCSEARCHbyAlgolia
Submit Docs

streamlit-option-menu

repository·master·Indexed 20 days ago

https://github.com/victoryhb/streamlit-option-menu

A Streamlit component that provides a customizable menu for single-item selection. It serves as an alternative to st.selectbox, offering support for Bootstrap icons, horizontal or vertical orientation, and direct CSS styling via a styles dictionary.

Tokens
1.6K
Snippets
5
Records
5
Agent score
22%

What's inside streamlit-option-menu

  1. How manual selection works

    master

    The manual_select parameter allows you to programmatically move the menu to a specific index. Because this parameter behaves like a button, you should not pass a constant value to it. Instead, you should pass the desired index only when an event occurs (like a button click or a process completion) and then reset it to None to avoid repeated triggers.

    Example pattern for manual selection using st.session_state:

    if st.session_state.get('switch_button', False):
    # Calculate the next index
    st.session_state['menu_option'] = (st.session_state.get('menu_option', 0) + 1) % 4
    manual_select = st.session_state['menu_option']
else:
    manual_select = None
    
selected4 = option_menu(
    None, 
    ["Home", "Upload", "Tasks", 'Settings'], 
    icons=['house', 'cloud-upload', "list-task", 'gear'], 
    orientation="horizontal", 
    manual_select=manual_select, 
    key='menu_4'
)

st.button("Move to Next", key='switch_button')

  3. Use the on_change callback

    master

    To perform actions immediately when a user selects a new menu item, provide a callback function to the on_change parameter. The callback function must accept a single argument, key, which corresponds to the key provided to the option_menu component. You can then access the current selection via st.session_state[key].

    def on_change(key):
    selection = st.session_state[key]
    st.write(f"Selection changed to {selection}")
    
selected5 = option_menu(
    None, 
    ["Home", "Upload", "Tasks", 'Settings'],
    icons=['house', 'cloud-upload', "list-task", 'gear'],
    on_change=on_change, 
    key='menu_5', 
    orientation="horizontal"
)

  4. Configure CSS styles for the menu

    master

    You can customize the appearance of the menu by passing a dictionary to the styles parameter. This allows you to target specific HTML elements like the container, icons, and navigation links.

    Example of styling the container, icons, and selected links:

    selected3 = option_menu(
    None, 
    ["Home", "Upload", "Tasks", 'Settings'], 
    icons=['house', 'cloud-upload', "list-task", 'gear'], 
    menu_icon="cast", 
    default_index=0, 
    orientation="horizontal",
    styles={
        "container": {"padding": "0!important", "background-color": "#fafafa"},
        "icon": {"color": "orange", "font-size": "25px"}, 
        "nav-link": {"font-size": "25px", "text-align": "left", "margin":"0px", "--hover-color": "#eee"},
        "nav-link-selected": {"background-color": "green"},
    }
)

  5. Use the option_menu function

    master

    The option_menu function creates a menu for selecting a single item from a list. It is an alternative to st.selectbox() that uses a static list instead of a dropdown and supports Bootstrap icons.

    Parameters

    • menu_title (required): The title of the menu. Pass None to hide it.
    • options (required): A list of strings to display. Use "---" to insert a section separator.
    • default_index (optional): The index of the selected option (default=0).
    • menu_icon (optional): A Bootstrap icon name for the menu title (default="menu-up").
    • icons (optional): A list of Bootstrap icon names for each option. Length must match options length (default=["caret-right"]).
    • orientation (optional): Either "vertical" or "horizontal" (default="vertical").
    • styles (optional): A dictionary for CSS customization. Supported keys:
      • container: The entire menu container div.
      • menu-title: The <a> element for the title.
      • menu-icon: The icon next to the title.
      • nav: The <ul> containing links.
      • nav-item: The <li> elements.
      • nav-link: The <a> element for each option text.
      • nav-link-selected: The <a> element for the currently selected option.
      • icon: The icon next to each option.
      • separator: The <hr> element for separators.
    • manual_select (optional): Pass an integer index to programmatically change the selection. Note: This behaves like a button; pass the index only once when the change is desired, not as a constant value.
    • on_change (optional): A callback function triggered on selection change. The callback must accept one argument: key.

    Returns: The string value of the currently selected option.

    from streamlit_option_menu import option_menu

selected = option_menu(
    menu_title="Main Menu",
    options=["Home", "Settings"],
    icons=["house", "gear"],
    menu_icon="cast",
    default_index=0,
    orientation="vertical"
)