How could I add a version number to my streamlit app?

Using Streamlit
,
1

Hi all,

I’m very new to streamlit, I’ve done the “30 days of streamlit” but that’s about it :sweat_smile:

I’m hoping to just add a version number into the bottom corner of a pre-existing streamlit app. The app uses streamlit-option-menu so always has a menu on the side, so it would be nice if I could add it to the bottom corner of that menu.

I already have the number I want to put there accessible to the app, I just need to be able to write text outside of the individual streamlit pages, maybe similar to position:fixed; bottom: 0; left:0; in terms of css?

Any help is appreciated, thank you :slight_smile:

2

I prefer to put my app version in the about box. There is a menu at the top-right corner.

image

image

Add the code after the imports.

st.set_page_config(
    layout='centered',
    page_title='Grand Tour 2024: The Sports Tournament Redefining Competition',
    menu_items={
        'about': '''**🏆 The Grand Tour v1.0**        
        The Sports Tournament that redefines the competition.
        '''
    }
)

References

emoji-1
emoji-2

1 Like
3

Hi! Thank you, I’ve ended up using this solution :slight_smile:

I did do some experimentation but couldn’t get it looking very good, but I’ll log it here just for posterity

You can actually implement raw html in two ways:

  1. Using component.html, though this will lock it within an iframe from what I can tell. A better solution is:
  2. Using the fact that the markdown standard includes the ability to implement inline html with st.markdown

A quick example for the second one could look like this:

st.markdown(f"<div style=\"position: fixed; top: 0; left: 0;\">{version_number}</div>")

This has the added benefit of using streamlits css unline option 1.

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.