Streamlit Sidebar Questions

Using Streamlit
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