TangleSpace / hydralit_components

A package of custom components for Streamlit and Hydralit. Can be used directly or in combination with the Hydralit package.
Apache License 2.0
185 stars 21 forks source link

Jumpy navigation bar fix #33

Open alon-sht opened 1 month ago

alon-sht commented 1 month ago

I found this very nice component https://github.com/bouzidanas/streamlit-float/

Combining streamlit-float with the nav bar 'pinned' mode, makes it sticky and prevents it from being jumpy

Example:

import streamlit as st
import hydralit_components as hc
from streamlit_float import float_init

st.set_page_config(layout="wide")
menu_container = st.container()
with menu_container:
    menu= hc.nav_bar(
        [
            {"icon": "bi-info-circle-fill", "label": "Page 1"},
            {"icon": "bi-bar-chart-fill", "label": "Page 2"},
            {"icon": "bi-search", "label": "Page 3"},
        ],
        key="test_menu",
        sticky_mode="pinned",
    )
menu_container.float("top: 0.0rem; bottom:10rem ;z-index: 999990;")

it does require adding some blank space at the top, but it might be nice to integrate it into hc