Insert Navigation Bar

Place Navigation Bar inside the Sidebar

(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

QuickWebsite49
(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/
QuickWebsite50
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
QuickWebsite51
(5) Change Orientation

orientation = "horizontal"

QuickWebsite52
(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"},
        }

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

Reference:
https://www.youtube.com/watch?v=hEPoto5xp3k