Streamlit Sidebar Questions

Using Streamlit
1

Hello Streamlit community!

I am a new member, and I had a question in regards to the sidebar feature on Streamlit.

I was wondering if there was a way to choose the right panel for st.sidebar, because I notice that the default is the left panel and from my searching of it, there does not seem to be a way to choose the right panel instead.

Am I wrong? Is there a way to choose the right panel?

If not, I’d love to discuss about it. Thank you!

2

Hi @joegenius98 and welcome to the forum :wave:,

Currently that’s not supported, but we are working on Customizable Layout for Streamlit.
In the meantime you can hack your way around a solution by using st.markdown.
Please see the code below:

import streamlit as st

html = """
  <style>
    .reportview-container {
      flex-direction: row-reverse;
    }

    header > .toolbar {
      flex-direction: row-reverse;
      left: 1rem;
      right: auto;
    }

    .sidebar .sidebar-collapse-control,
    .sidebar.--collapsed .sidebar-collapse-control {
      left: auto;
      right: 0.5rem;
    }

    .sidebar .sidebar-content {
      transition: margin-right .3s, box-shadow .3s;
    }

    .sidebar.--collapsed .sidebar-content {
      margin-left: auto;
      margin-right: -21rem;
    }

    @media (max-width: 991.98px) {
      .sidebar .sidebar-content {
        margin-left: auto;
      }
    }
  </style>
"""
st.markdown(html, unsafe_allow_html=True)

st.title("New Sidebar")
st.sidebar.text("I'm here now.")

Please feel free to let us know if you need any additional help!
And thanks for using Streamlit! :rocket:

3 Likes
3

Hi @kantuni

Thank you for responding to my post.

Your solution does work when I test it out. However, I was wondering if there is a way to support both a left-hand-side and right-hand-side bar simultaneously. Since only instance of “st.sidebar” exists at a time, it seems like we can only choose one side at a time. Thank you.

4

Dear @joegenius98,

Unfortunately, that’s not supported. Will reply here if at some point that will be possible.
Thanks!

1 Like
5

Don’t know if i missed something on that topic.
Yet it would be nice if it can be supported in the future.
Just by passing it as a parameter.

6

Hi @kantuni

The sidebar from your code works, but does not collapse. Is there a way to make that happen?

Thank you!