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

🧩 Streamlit Components
6

Update

Implemented custom CSS, see original post for more details.

7

Try and just get this error:

TypeError: on_hover_tabs() got an unexpected keyword argument ‘name’

9

Apologies, I forgot to update the readme file. It should be ‘tabName’ not ‘name’ as the input variable.

10

Update

  • Support for mobile/smaller screens has been added. Just update the style.css file.
11

Hi there :slight_smile:

This feature doesn’t work for me… I used an image background in my app, it might be the reason.
The navtab works well but the rest of the app does not move with it, and leave a blank column which is not good.

I follow the code and download the CSS file:

st.markdown('<style>' + open('./style.css').read() + '</style>', unsafe_allow_html=True)

with st.sidebar:
    tabs = on_hover_tabs(tabName=['Dashboard', 'Money', 'Economy'], 
                        iconName=['dashboard', 'money', 'economy'], default_choice=0)

def main():
    ...

Capture d’écran 2022-10-19 082940
Capture d’écran 2022-10-19 0829401171×853 78.2 KB

Any idea of why ?

12

Did you set the layout as follows?

st.set_page_config(layout="wide")

13

Yes.

14

A simple edit at the end of the CSS style document worked for me:

[data-testid="stSidebar"]{
background-color: #fff;
}
15

Hi, Im still seeing the blank column per Maxime_tut’s post. occurs whenever i upgrade beyond streamlit==1.11.0

any thoughts?

16

Also addressed here: I'm trying out the streamlit-on-Hover-tabs component. Not working as expected

17

Hey, so sorry for the late response. I have looked into it and its an issue with streamlit’s sidebar css. It has a set min-width and a width of 335px I think. Removing those should make the package function as normal. Though I am having a bit of trouble making these changes in a css file. Will get back to you when I have figured this out.

Thanks!

18

Hey, so sorry for the late response, I have replied here

1 Like
19

So the solution:

Replace:

 section[data-testid='stSidebar'] > div:nth-of-type(1) {
    background-color: #111;
}

with this:

section[data-testid='stSidebar']{

    background-color: #111;
    min-width:unset !important;
    max-width: unset !important; /*<--- This part is optional.*/
    width: unset !important;
    flex-shrink: unset !important; /*<--- This part is optional.*/
    
}
`
20

Solution is here

21

How to keep the text white when on specififc page? Also for me when the sidebar shrinks the icons dont show. Do you know why that would happen?

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.

2 Likes