Disclosure

So I decided not to support this package nay further. There are far better options out there like streamlt Antd Components (github) I stumbled upon. 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.

Update I built a new sidebar component here. Will build other sidebar templates inside of this repo including the hover effect that the streamlit-on-Hover-tabs component was built on.

streamlit-on-Hover-tabs

Custom tabs for on hover streamlit navigation bar created by custom css

on-hover-tabs is a component meant for a custom navigation bar like the above created via custom CSS. The CSS is also included in the repository.

• Its possible to chose custom icons which is enabled via https://fonts.google.com/icons
• Plans to also adjust the sidebar via the python code is also in the works (like colour etc, but you can enter into the style css and do this yourself)

Its built on the streamlit custom components typescript template

To install it:

pip install streamlit-on-Hover-tabs

Variables

• tabName: This is the name of the tab
• iconName: This is the name of the icon you wish to use in the sidebar
• styles: Borrowed an implementation from the wonderful Victoryhb implementation. It just has four html elements with css styles which you can adapt as you would if you were in a css file. It employs styles from glamor which allows for other implementations like hover, active etc as demonstrated below. Now you can create your own navigation bar and customize the tabs to meet the specs of your custom tab.
  • 'navtab' which is the div container that contains the tabs
  • 'tabOptionsStyle' which is the span container that contains the icons and tabName
  • 'iconStyle' which is the icon tag that contains the icons
  • 'tabStyle' which is the list contains the tabName

You need to save the style.css file in your directory. Its located here

Examples:

from st_on_hover_tabs import on_hover_tabs
import streamlit as st
st.set_page_config(layout="wide")

st.header("Custom tab component for on-hover navigation bar")
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)

if tabs =='Dashboard':
    st.title("Navigation Bar")
    st.write('Name of option is {}'.format(tabs))

elif tabs == 'Money':
    st.title("Paper")
    st.write('Name of option is {}'.format(tabs))

elif tabs == 'Economy':
    st.title("Tom")
    st.write('Name of option is {}'.format(tabs))
    

To implement with styles:

(These are the current default CSS styles for the tabs)

with st.sidebar:
        tabs = on_hover_tabs(tabName=['Dashboard', 'Money', 'Economy'], 
                             iconName=['dashboard', 'money', 'economy'],
                             styles = {'navtab': {'background-color':'#111',
                                                  'color': '#818181',
                                                  'font-size': '18px',
                                                  'transition': '.3s',
                                                  'white-space': 'nowrap',
                                                  'text-transform': 'uppercase'},
                                       'tabOptionsStyle': {':hover :hover': {'color': 'red',
                                                                      'cursor': 'pointer'}},
                                       'iconStyle':{'position':'fixed',
                                                    'left':'7.5px',
                                                    'text-align': 'left'},
                                       'tabStyle' : {'list-style-type': 'none',
                                                     'margin-bottom': '30px',
                                                     'padding-left': '30px'}},
                             key="1")