Summary
I have a multipage Streamlit app, but would like the page buttons to appear at the bottom of the left-hand navigation bar (underneath the text) rather than the top. Is there any way to do this?
I have a multipage Streamlit app, but would like the page buttons to appear at the bottom of the left-hand navigation bar (underneath the text) rather than the top. Is there any way to do this?
This will need a bit more styling to make it robust for tall content (either in navigation or user-generated sidebar).
css='''
[data-testid="stSidebarNav"] {
position:absolute;
bottom: 0;
}
'''
st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)
Thanks for the reply. The buttons are now at the bottom but they are overlapping with the navigation bar text and they are no longer clickable.
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)
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.