Keyboard_double_arrow_right

Using Streamlit
1

I upgraded my streamlit app from 1.37.0 to 1.50.0. I am using the streamlit_navigation_bar library to create a horizontal navbar to comply with my company’s brand policies. The code is below. As you can see I am suppressing the sidebar altogether.

The issue I am having is that instead of rendering the >> icon in the sidebar, it tries to write out its description: “keyboard_double_arrow_right”. It also fails to show my horizontal navbar.

I cannot see any other posts on this. Does 1.50.0 not work with streamlit_navigation_bar library? I realize that is a third party library, but it is the only way I know how to create a horizontal navbar that I can reformat. st.navigation doesn’t allow for reformatting.

Any ideas? Do I need to specifically load that icon or something?

Here is some sample code:

    st.set_page_config(
            page_title="MY TITLE - " + title,  # Sets the tab title
            #page_icon=image,  # Sets the tab icon (favicon)
            layout=layout
        )

    navbar_pages = ["Home", "Get Data", "Analyze", "Rules", "Terms of use"]

    st.markdown("""
        <style>
        div[data-testid="stSidebar"] {
            display: none;
        }
        </style>
    """, unsafe_allow_html=True)

    page_choice = st_navbar(navbar_pages)

    navbar = st_navbar(navbar_pages,
                       selected=selected_page,
                       #logo_path=f"{os.getcwd()}{os.sep}static{os.sep}tra-logo.svg",
                       #styles=styles,
                       #options=options
                        )

    # Define custom page routing based on navbar selection
    if navbar != selected_page:
        st.session_state._previous_page = selected_page
        if page_choice == "Home":
            st.switch_page(f"{os.getcwd()}{os.sep}frontend.py")
        elif page_choice == "Get Data":
            st.switch_page(f"{os.getcwd()}{os.sep}pages{os.sep}get_data.py")
        elif page_choice == "Analyze":
            st.switch_page(f"{os.getcwd()}{os.sep}pages{os.sep}analyze.py")
        elif page_choice == "Rules":
            st.switch_page(f"{os.getcwd()}{os.sep}pages{os.sep}business_rules.py")
        elif page_choice == "Terms of use":
            st.switch_page(f"{os.getcwd()}{os.sep}pages{os.sep}EULA.py")
2

I don’t see where the icon is used in your code, so I’m guessing you mean something internal to the custom component.

I’m not sure about the custom component, but just FYI, Streamlit did add a top navigation bar natively in 1.46.0. Is there a particular feature that’s still missing for you?

3

To answer your first question - yes, I am talking about the little >> chevron that appears in the top of the sidebar when you use a horizontal navigation bar. It should render automatically. But I get this text instead.

Can I format the top navigation bar? That is the only reason I was using streamlit_navigation_bar. Our brand people are very particular.

4

What kind of formatting? You can create groupings of pages and use icons. Some of the global theming settings will have an impact, and you can use some additional CSS hacks on top of that if you need.

5

So this is what I was using before:

styles = {
“nav”: { # Affects navbar container as a whole
“background-color”: “white”, # Background colour of navbar
“justify-content”: “left”, # Align navbar items to the left
“font-family”: “‘Helvetica Neue’, sans-serif !important”, # Custom font
“padding”: “0rem 0rem 0rem 1rem” # Padding on navbar (top, right, bottom, left)
},
“div”: { # Affects navbar div containers
“height”: “100%”,
“width”: “100%”
},
“img”: { # Affects navbar logo
“width”: “8.0rem”,
“height”: “8.0rem”,
“vertical-align”: “middle”
},
“span”: { # Affects navbar text / elements
“color”: “#131313”,
“padding”: “0.5rem”,
“font-size”: “0.95rem”,
“overflow”: “hidden”,
“white-space”: “nowrap”
},
“ul”: { # Affects navbar items in list
“justify-content”: “left”,
“gap”: “32px”,
“height”: “100%”
},
“hover”: { # Button hover state
“background-color”: “#F6F6F6”,
“color”: “#D04A02”
},
“active”: { # Button active state
“font-weight”: “normal”,
“background-color”: “#FFFFFF”,
“color”: “#D04A02”,
“border-bottom”: “2px solid #D04A02”
}
}

6

Streamlit is constantly upgrading its icon libraries to match the latest available, so the navigation custom component probably needs an update to stay compatible with the latest icons.

7

At a glance, I think you should be able to get what you want. It’s worth exploring at least. The Streamlit top nav is left-justified by default, so you get that one for free. :slight_smile:

8

I tried eliminating the horizontal navbar altogether just to see what would happen and I still see this in the left sidebar. I am going to try and downgrade to an earlier version of streamlit. I don’t know what else to do.

image
image465×340 9.52 KB

9

You could try a clean environment without the custom component.

10

I also have the same issue. The button is not rendering properly, instead the text is only visible.