(1)Prepare Your Environment
(1)-1 Activate Your Virtual Environment
# Windows Command Prompt
venv\Scripts\activate.bat
(1)-2 Install the Required Library
pip install streamlit-option-menu
(2) Set Up the Navigation Bar
(2)-1 Import the Option Menu
from streamlit_option_menu import option_menu
(2)-2 Integrate the Navigation Bar
Sample code snippet
# ---- As sidebar menu ----
with st.sidebar:
selected = option_menu(
menu_title="Want to know more?", # required
options=["Home", "Projects", "Contact"] # required
)
Utilize the option_menu within the Streamlit sidebar to create your navigation bar.
(3) Display Content Based on Selection
Implement Conditional Displays
if selected == "Home":
# --Header Section--
# Wrap this section with streamlite container to organize the code (Optional)
with st.container():
st.subheader("Discover everything about me here!")
st.title("Hi~ I'm growingpenguin!:penguin:")
st.image(img_profile, width=300)
st.write("I'm a senior undergraduate student specializing in Artificial Intelligence at Sungshin Women's University")
(4) Specify icon for each item in your options list
(4)-1 Go find the icons on the bootstrap website
Link: https://icons.getbootstrap.com/
All you need is the icon’s name
(4)-2 Fix the code
# ---- As sidebar menu ----
with st.sidebar:
selected = option_menu(
menu_title="Want to know more?", # required
options=["Home", "Projects", "Contact"], # required
icons = ["house", "pencil", "envelope-paper-heart-fill"],
menu_icon = "cast",
#Index starts at 0, which is the default value for arg
default_index=0
)
(4)-3 Result
(5) Change Orientation
orientation = "horizontal"
(5) Add style parameters
styles={
#"container": {"padding": "0!important", "background-color": "#fafafa"},
"icon": {"color": "#white", "font-size": "14px"},
"nav-link": {"font-size": "14px", "text-align": "left", "margin":"0px", "--hover-color": "#eee"},
"nav-link-selected": {"background-color": "lightpurple"},
}
Reference: https://github.com/victoryhb/streamlit-option-menu
Reference:
https://www.youtube.com/watch?v=hEPoto5xp3k