Is it possible to create a navigation thru image system?

Using Streamlit
, , ,
1

I am looking to create a menu inside an application, I am using a side bar already, (home, documentation and settings) but I am looking to add an extra navigation within my home page, that will navigate to another pages that are specific functions of the app (these are not intended to be shown in the side bar, something like this:

image
image3243Ă—1577 421 KB

I have been trying with

st.markdown(
    f"""
    <a href="set-up">
        <img src="https://image.com" alt="Logo" style="width:200px;">
    </a>
    """,
    unsafe_allow_html=True
)

and

st.html('''
        <a href="set-up"><img src="image.com/logo.svg" alt="logo" style="width:200px;"></a>
        ''')

as you can see I reference the page in the <a href= as “set-up” that is the name of my file/page (set-up.py)

and they show in the app, but when I try to click it, the application starts to load for ever…

2

Hey, you should check 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 allow you to use function instead of page (the result is the same, but i thing it’s much easier to manipulate the function, I really enjoy using it)
And after you can juste do some grid of buttons to functions to display the content.

1 Like
3

That’s interesting, sadly only accept “Bootstrap Icons” so pretty limited

4

Hi,

Check this demo:

1 Like