streamlit-scroll-navigation/example.py at main · nibsbin/streamlit-scroll-navigation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
# Setup
import streamlit as st
from streamlit_scroll_navigation import scroll_navbar
st.set_page_config(page_title="Scroll Navigation Demo")

# Anchor IDs and icons
anchor_ids = ["About", "Features", "Settings", "Pricing", "Contact"]
anchor_icons = ["info-circle", "lightbulb", "gear", "tag", "envelope"]

# 1. vertical menu in sidebar
with st.sidebar:
    st.subheader("Example 1", help="Vertical menu in sidebar")
    scroll_navbar(
        anchor_ids,
        anchor_labels=None, # Use anchor_ids as labels
        anchor_icons=anchor_icons)

# 2. horizontal menu
st.subheader("Example 2", help="Horizontal menu")
scroll_navbar(
        anchor_ids,
        key = "navbar2",
        anchor_icons=anchor_icons,
        orientation="horizontal")

# 3. Custom anchor labels with no icons
st.subheader("Example 3", help="Custom anchor labels with no icons")
scroll_navbar(
    anchor_ids,
    key="navbar3",
    anchor_labels=[
        "About Us - We're awesome!",
        "Features - Explore our Product",
        "Settings - Tailor your Experience",
        "Pricing - Spend Money to Make Money",
        "Get in Touch - We're here to help"
    ],
    orientation="horizontal")

# 4. CSS style definitions
st.subheader("Example 4", help="Custom CSS styles")
scroll_navbar(
    anchor_ids=anchor_ids,
    key="navbar4",
    orientation="horizontal",
    override_styles={
        "navbarButtonBase": {
            "backgroundColor": "#007bff",  # Set a custom button background color
            "color": "#ffffff",  # Set custom text color
        },
        "navbarButtonHover": {
            "backgroundColor": "#0056b3",  # Set a custom hover color for the buttons
        },
        "navigationBarBase": {
            "backgroundColor": "#f8f9fa",  # Change the navigation bar background color
        }
    })

# 5. Force anchor
st.subheader("Example 5", help="Programatically select an anchor within StreamLit fragment")
@st.fragment
def example5():
    from streamlit_scroll_navigation import ForceAnchor
    force_settings = ForceAnchor()
    if st.button("Go to Settings"):
        force_settings.push("Settings")
    scroll_navbar(
            anchor_ids,
            key="navbar5",
            anchor_icons=anchor_icons,
            orientation="horizontal",
            force_anchor=force_settings)
example5()

# 6. Retrieve active anchor
with st.sidebar:
    st.subheader("Example 6", help="Retrieve active anchor for other Streamlit components")
    active_anchor = scroll_navbar(
        anchor_ids,
        key="navbar6",
        orientation="vertical")
    st.write(f"{active_anchor} is active in Example 6")

# 7. Misc:
#   Disable automatic active anchor updates, instant scrolling
#   Instant snap scrolling
with st.sidebar:
    st.subheader("Example 7", help="Instant scrolling; disable anchor tracking")
    scroll_navbar(
        anchor_ids=anchor_ids,
        key="navbar7",
        orientation="vertical",
        auto_update_anchor=False,
        disable_scroll=True)

# Dummy page setup
for anchor_id in anchor_ids:
    st.subheader(anchor_id,anchor=anchor_id)
    st.write("content " * 100)