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

🧩 Streamlit Components
1

So I decided to create my own custom navigation bar with CSS. But needed a custom navigation component (navigation tabs). Took a while, but I finally got there. More work needs to be done but its my first time using typescript so please bare with me.

Details for the project can be located here

Firstly, you’d need to download the style.css file into your directory and load it as in the example in the github page above (see readme). Then import the component and you are good to go. I recently updated streamlit and noticed a change in the css, just one, that was related to the navigation bar (the stHeader) but have added this to the style css file. This is the main problem, as streamlit updates, changes to the navigation bar are to be expected but they can be easily adjusted with CSS.

Anyway, thanks streamlit, and enjoy everyone!

demonstration-on-hover

UPDATE

I have now implemented custom CSS to adjust tabs for your own custom navigation. I borrowed the CSS implementation from the wonderful Victoryhb’s option menu.

So… make your own nav bar using the CSS file (style) and build your own tabs to accommodate it.

4 Likes
2

And yet another beautiful custom navigation sidebar :heart_eyes:

Don’t forget to add it to the Components Tracker so we don’t lose track of it!

Have a nice day :balloon:
Fanilo

1 Like
3

Thanks, added!

4

This component is really great

1 Like
5

Glad you like it!

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