Is it possible to have an app bar at the top of a streamlit page?

Using Streamlit
1

I am trying to create a bar positioned at the top of the streamlit’s app page but there’s always space between the top of the page and the bar. I would also like the bar to fit the screen width, but it doesn’t. This is the code so far:

with elements("initialization_bar"):
    with mui.Box(key = "initialization_admin", 
                 sx = {"display": "flex", "flexDirection": "row", "border": 2, "borderRadius": 0, "borderColor": "divider", "overflow": "hidden", "width": "100%", "height": "50vh", "padding": "0", "margin": "0"}, elevation = 1, square = True):
        with mui.AppBar(position = "static"):
            pass

Any ideas?

2

Hi @a.man

By app bar, perhaps you’re referring to a navigation bar? If so, here’s a video showing how to use a CSS customization approach to add it (https://www.youtube.com/watch?v=hoPvOIJvrb8)

Alternatively, you can check out the hydralit component (GitHub - TangleSpace/hydralit: A library to create multi-page Streamlit applications with ease.)

3

Hi @dataprofessor, thank you for the sources! :pray:

Yes, that’s the idea, however, I was trying to implement it with mui.elements. I kind of solved it by taking ideas from here reduce-white-space-top-of-the-page.

1 Like
4

You’re welcome, Glad to hear!

5

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