Sidebar Menu custom component for Streamlit
Project description
Streamlit - Sidemenu
A streamlit component to implement collapsible menu on st_sidebar. Currently only child level, does not support grand-child level or lower level descendents.
Installation
pip install streamlit-sidemenu
Usage
Refer to this file for example usage.
Custom Styling
You can customize the menu styling from the example below (which is the default styling). Pass the customized style into the component styles
argument.
styles = """
body {
margin: 0;
}
#app {
margin: 0;
}
/* Fixed sidenav, full height */
.sidenav {
font-family: Arial;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
/* padding-top: 20px; */
}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}
/* Main content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.sidenav a.selected {
background-color: green;
color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}
"""
.pypirc File
Place the file in $HOME / ~ directory
[distutils]
index-servers =
pypi
testpypi
[pypi]
username = __token__
password = pypi-xxx
[testpypi]
username = __token__
password = pypi-yyy
repository = https://test.pypi.org/legacy/
Frontend Notes
npm 6.x
cd <component_name_vanilla>
npm init vite@latest frontend --template vanilla
cd <component_name_vue>
npm init vite@latest frontend --template vue
npm 7+
cd <component_name>
npm init vite@latest frontend -- --template vanilla
cd frontend
npm i streamlit-component-lib
take note of vite.config.js
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
streamlit_sidemenu-0.0.4.tar.gz
(62.6 kB
view hashes)
Built Distribution
Close
Hashes for streamlit_sidemenu-0.0.4-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | e96e031d841fb185b430cc373982d02514ae4babd1895ec58b4aab9493e0a92b |
|
MD5 | c89cf74a6e6881bc1a7fd0138668ff5b |
|
BLAKE2b-256 | 851cc4a0684a8ddec49ba49bac54f301506dc699e737694c6b454aa29d4df13e |