streamlit-on-Hover-tabs (for custom navigation bar)

Custom Components
22

is this can be implemented with multipage builtin streamlit?

23

Hello, sorry for the late response. Been busy with other projects. I am working to implement this - to show a particular tab has been selected.

24

I have adjusted the style.css (to change properties of the streamlit sidebar) to account for some realities.

  1. It seems the sidebar was shifted to the left by 300px+ hence why some users when resizing their browser did not see the sidebar.
  2. If your screen is hoverable, it only makes sense that this hover effect is active for screen sizes around 500px+. Below this, the button click to open and close is active.
25

On the next update yes. Coming soon, stay tuned.

27

So I decided not to support this package nay further. There are far better options out there like streamlt Antd Components (github) I just stumbled on. This offers nested nav options - which was what I implemented in the latest update but its already available in this package. Combine that with the switch_page function to navigate between pages. All the best.

3 Likes
28

Hi there! Sorry to hear about, I love the app.

One question, how to use the nested nav options? Is this creating like “subtopics” on the sidebar?

29

For what Antd Components?

Something like this:

import streamlit_antd_components as sac

sac.menu([
    sac.MenuItem('home', icon='house-fill', tag=[sac.Tag('Tag1', color='green'), sac.Tag('Tag2', 'red')]),
    sac.MenuItem('products', icon='box-fill', children=[
        sac.MenuItem('apple', icon='apple'),
        sac.MenuItem('other', icon='git', description='other items', children=[
            sac.MenuItem('google', icon='google', description='item description'),
            sac.MenuItem('gitlab', icon='gitlab'),
            sac.MenuItem('wechat', icon='wechat'),
        ]),
    ]),
    sac.MenuItem('disabled', disabled=True),
    sac.MenuItem(type='divider'),
    sac.MenuItem('link', type='group', children=[
        sac.MenuItem('antd-menu', icon='heart-fill', href='https://ant.design/components/menu#menu'),
        sac.MenuItem('bootstrap-icon', icon='bootstrap-fill', href='https://icons.getbootstrap.com/'),
    ]),
], open_all=True)

For more info, checkout the demo

30

Sorry to see this project closing. I understand it probably takes a lot to keep it up, but after trying 5 or 6 different Nav options for streamlit, this one is definitely the best. The cosmetics of it far surpasses the other options.

Curious, how do I implement the icons from the google library? Or another source for that matter? Thanks.

31

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