How to change the location of multipage buttons?

šŸŽˆ Using Streamlit
4

Yeah, thatā€™s what I meant about it not being robust for tall content. Hereā€™s a little bit more of the work to make it functional with both navigation and user-generated sidebar content being very tall. It still has some odd artifacts that can be further beautified and I havenā€™t tested it across many different browser/devices/aspect ratios. I might tweak it a bit more later, but Iā€™m a bit tired at the moment. Hopefully this gives you a some direction on where to go:

import streamlit as st

for letter in 'ABCDEFGHIJKLMNOPQRSTUVWXYZ':
    st.sidebar.button(letter)

# If you have a theme specified, you can get the color through get_option
# color = st.get_option('theme.secondaryBackgroundColor')

# Correct color for dark mode
color = '#262730'

css=f'''
[data-testid="stSidebarNav"] {{
    position:absolute;
    bottom: 0;
    z-index: 1;
    background: {color};
}}
[data-testid="stSidebarNav"] > ul {{
    padding-top: 2rem;
}}
[data-testid="stSidebarNav"] > div {{
    position:absolute;
    top: 0;
}}
[data-testid="stSidebarNav"] > div > svg {{
    transform: rotate(180deg) !important;
}}
[data-testid="stSidebarNav"] + div {{
    overflow: scroll;
    max-height: 66vh;
}}
'''

st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)