Set height of sidebar in a multipage app and sidebar components

I have a multipage app see example below.

However, if I want to add information to the sidebar, e.g. with st.sidebar.write("hello sidebar"), then I receive this split sidebar with the scrollbar for the pages part.

How can I move the horizontal line so that all entries are readable at once? Or is there a possibility to scale this automatically that the lower part only uses the minimum amount of space it needs (based on the screen size) and does not split in the middle instead?

Thank you very much.

Is this what you are looking for?

1 Like

Yes, indeed, thank you very much. Closing as duplicate.

I am wondering if it would be possible to implement this into streamlit at some point with a function that takes the desired height as input.

You could adjust the value of min-height to something else using an f-string:


import streamlit as st

pages_height = st.slider(
    "Height of pages list",
    format="%d %%",

    [data-testid='stSidebarNav'] > ul {{
        min-height: {pages_height}vh;

"# Title of app"

"Some repeated content" * 100

with st.sidebar:
    for i in range(5):
        st.button(f"Button {i}", use_container_width=True)

:warning: notice the double {{ and }} when dealing with f-strings.

I agree that having a native control for the pages configuration would be ideal, and this would be a good candidate for a feature request.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.