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)