| Name | streamlit-scroll-navigation JSON |
| Version |
1.0.3
JSON |
| download |
| home_page | None |
| Summary | Streamlit component for single page navigation scrolling. |
| upload_time | 2024-10-21 15:46:45 |
| maintainer | None |
| docs_url | None |
| author | None |
| requires_python | >=3.7 |
| license | MIT |
| keywords |
|
| VCS |
|
| bugtrack_url |
|
| requirements |
No requirements were recorded.
|
| Travis-CI |
No Travis.
|
| coveralls test coverage |
No coveralls.
|
# streamlit-scroll-navigation
This package enables scroll-based navigation for
seamless single-page Streamlit applications. It features:
* **Smooth Animations**: Scrolling to anchors on the page feels fluid and seamless.
* **Anchor tracking**: As the user scrolls, the active anchor automatically updates to the nearest visible anchor.
* **Configurable Icons**: Edit CSS attributes with the override_styles parameter for additional customization.
* **Styled with Bootstrap**: The component comes styled with Bootstrap for a sleek and responsive design.
Video Demo:
https://github.com/user-attachments/assets/28208ecb-53c0-48b4-bc05-59b7a2c90f67
## Installation
```sh
pip install streamlit-scroll-navigation
```
## Usage
scroll_navbar() creates a scrollable navigation bar that allows users to navigate to different sections based on provided anchor IDs. It is highly customizable, supporting various orientations, labels, icons, and styles.
- `anchor_ids` ( `Collection[str]` ):
A collection of anchor IDs that represent the sections or points to navigate to. **Required**.
- `key` ( `str`, optional ):
A unique key for the component. Each navbar must have a unique key for cross-origin message handling.
**Default**: `'scroll_navbar_default'`.
- `anchor_icons` ( `Collection[str]`, optional ):
Icons corresponding to each navigation button. The order of icons provided should correspond to the order of `anchor_ids`. If not provided, no icons will be displayed.
**Default**: `None`.
- `anchor_labels` ( `Collection[str]`, optional ):
Labels for each navigation button. The order of labels provided should correspond to the order of `anchor_ids`. If not provided, the anchor IDs will be used as labels.
**Default**: `None`.
- `force_anchor` ( `str`, optional ):
A specific anchor ID to automatically navigate to. This simulates clicking on an anchor.
**Default**: `None`.
- `orientation` ( `Literal['vertical', 'horizontal']`, optional ):
The orientation of the navigation bar, either `vertical` or `horizontal`.
**Default**: `'vertical'`.
- `override_styles` ( `Dict[str, str]`, optional ):
A dictionary to override the default styles of the component, allowing further customization.
**Default**: `{}`.
## Examples
```python
import streamlit as st
from streamlit_scroll_navigation import scroll_navbar
# Specify anchor IDs and icons
anchor_ids = ["About", "Features", "Settings", "Pricing", "Contact"]
anchor_icons = ["info-circle", "lightbulb", "gear", "tag", "envelope"]
# 1. as sidebar menu
with st.sidebar:
st.subheader("Example 1")
scroll_navbar(
anchor_ids,
#key="navbar1", #use for first navbar
anchor_icons=anchor_icons)
# 2. horizontal menu
st.subheader("Example 2")
scroll_navbar(
anchor_ids,
key = "navbar2",
anchor_icons=anchor_icons,
orientation="horizontal")
# 3. Custom anchor labels with no icons
st.subheader("Example 3")
scroll_navbar(
anchor_ids,
key="navbar3",
anchor_labels=["About Us", "The Features", "The Settings", "The Pricing", "Contact Us"],
orientation="horizontal")
# 4. Style overrides
st.subheader("Example 4")
scroll_navbar(
anchor_ids=anchor_ids,
key="navbar4",
orientation="horizontal",
override_styles={
"navbarButtonBase": {
"backgroundColor": "#007bff", # Set a custom button background color
"color": "#ffffff", # Set custom text color
},
"navbarButtonHover": {
"backgroundColor": "#0056b3", # Set a custom hover color for the buttons
},
"navigationBarBase": {
"backgroundColor": "#f8f9fa", # Change the navigation bar background color
}
}
)
# 5. Force anchor
st.subheader("Example 5")
force_body = None
if st.button("Go to Body"):
force_body = "Body"
scroll_navbar(
anchor_ids,
key="5",
anchor_icons=anchor_icons,
orientation="horizontal",
force_anchor=force_body)
# 6. Retrieve active anchor
with st.sidebar:
st.subheader("Example 6")
active_anchor = scroll_navbar(
anchor_ids,
key="navbar6",
orientation="vertical")
st.write(f"{active_anchor} is active")
# Setup dummy page
for anchor_id in anchor_ids:
st.subheader(anchor_id,anchor=anchor_id)
st.write("content " * 100)
```
### Styles Overrides
The override_styles argument allows you to customize the styles for scroll_navbar component. This property accepts an object containing specific style overrides that will be merged with the base styles defined in the component. By using this option, you can modify the appearance of the navigation bar to better fit your design requirements.
Below is a list of style keys available for customization:
- `navbarButtonBase`: Base button styling with dark background, white text, pointer cursor, and smooth color transitions.
- `navbarButtonHorizontal` & `navbarButtonVertical`: Orientation-specific properties for horizontal or vertical button alignment.
- `navbarButtonActive`: Style for active anchor buttons. Sets the background color and font weight.
- `navbarButtonHover`: Style for hovered buttons. Sets the background colors and font weight.
- `navigationBarBase`: Core styling for the navigation bar container, setting background, padding, and flexbox layout.
- `navigationBarHorizontal` & `navigationBarVertical`: Orientation-specific properties for the navigation bar.
## Contributions
Contributions are welcome! If you’d like to contribute, follow these steps:
1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Make your changes and commit them with clear messages.
4. Open a pull request, and provide a detailed description of your changes.
Feel free to create issues or feature requests as well.
This component is built on React.
It uses parent DOM injection to enable cross-origin interactions (see ./streamlit_scroll_navigation/\_\_init__.py).
The API and stylesx are inspired by victoryhb's [streamlit-option-menu](https://github.com/victoryhb/streamlit-option-menu).
Raw data
{
"_id": null,
"home_page": null,
"name": "streamlit-scroll-navigation",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.7",
"maintainer_email": null,
"keywords": null,
"author": null,
"author_email": "John Pan <jpthek9@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/bd/a4/c47c16a85355cf8edd73b7bba4fe51e47f21500a4a0432b617f63cfef879/streamlit_scroll_navigation-1.0.3.tar.gz",
"platform": null,
"description": "# streamlit-scroll-navigation\n\nThis package enables scroll-based navigation for\nseamless single-page Streamlit applications. It features:\n\n* **Smooth Animations**: Scrolling to anchors on the page feels fluid and seamless.\n* **Anchor tracking**: As the user scrolls, the active anchor automatically updates to the nearest visible anchor.\n* **Configurable Icons**: Edit CSS attributes with the override_styles parameter for additional customization.\n* **Styled with Bootstrap**: The component comes styled with Bootstrap for a sleek and responsive design.\n\nVideo Demo:\n\nhttps://github.com/user-attachments/assets/28208ecb-53c0-48b4-bc05-59b7a2c90f67\n\n## Installation\n\n```sh\npip install streamlit-scroll-navigation\n```\n\n## Usage\n\nscroll_navbar() creates a scrollable navigation bar that allows users to navigate to different sections based on provided anchor IDs. It is highly customizable, supporting various orientations, labels, icons, and styles. \n\n- `anchor_ids` ( `Collection[str]` ): \n A collection of anchor IDs that represent the sections or points to navigate to. **Required**.\n\n- `key` ( `str`, optional ): \n A unique key for the component. Each navbar must have a unique key for cross-origin message handling. \n **Default**: `'scroll_navbar_default'`.\n\n- `anchor_icons` ( `Collection[str]`, optional ): \n Icons corresponding to each navigation button. The order of icons provided should correspond to the order of `anchor_ids`. If not provided, no icons will be displayed. \n **Default**: `None`.\n\n- `anchor_labels` ( `Collection[str]`, optional ): \n Labels for each navigation button. The order of labels provided should correspond to the order of `anchor_ids`. If not provided, the anchor IDs will be used as labels. \n **Default**: `None`.\n\n- `force_anchor` ( `str`, optional ): \n A specific anchor ID to automatically navigate to. This simulates clicking on an anchor. \n **Default**: `None`.\n\n- `orientation` ( `Literal['vertical', 'horizontal']`, optional ): \n The orientation of the navigation bar, either `vertical` or `horizontal`. \n **Default**: `'vertical'`.\n\n- `override_styles` ( `Dict[str, str]`, optional ): \n A dictionary to override the default styles of the component, allowing further customization. \n **Default**: `{}`.\n\n\n## Examples\n\n```python\nimport streamlit as st\nfrom streamlit_scroll_navigation import scroll_navbar\n\n# Specify anchor IDs and icons\nanchor_ids = [\"About\", \"Features\", \"Settings\", \"Pricing\", \"Contact\"]\nanchor_icons = [\"info-circle\", \"lightbulb\", \"gear\", \"tag\", \"envelope\"]\n\n# 1. as sidebar menu\nwith st.sidebar:\n st.subheader(\"Example 1\")\n scroll_navbar(\n anchor_ids,\n #key=\"navbar1\", #use for first navbar\n\n anchor_icons=anchor_icons)\n\n# 2. horizontal menu\nst.subheader(\"Example 2\")\nscroll_navbar(\n anchor_ids,\n key = \"navbar2\",\n anchor_icons=anchor_icons,\n orientation=\"horizontal\")\n\n# 3. Custom anchor labels with no icons\nst.subheader(\"Example 3\")\nscroll_navbar(\n anchor_ids,\n key=\"navbar3\",\n anchor_labels=[\"About Us\", \"The Features\", \"The Settings\", \"The Pricing\", \"Contact Us\"],\n orientation=\"horizontal\")\n\n# 4. Style overrides\nst.subheader(\"Example 4\")\nscroll_navbar(\n anchor_ids=anchor_ids,\n key=\"navbar4\",\n orientation=\"horizontal\",\n override_styles={\n \"navbarButtonBase\": {\n \"backgroundColor\": \"#007bff\", # Set a custom button background color\n \"color\": \"#ffffff\", # Set custom text color\n },\n \"navbarButtonHover\": {\n \"backgroundColor\": \"#0056b3\", # Set a custom hover color for the buttons\n },\n \"navigationBarBase\": {\n \"backgroundColor\": \"#f8f9fa\", # Change the navigation bar background color\n }\n }\n)\n\n# 5. Force anchor\nst.subheader(\"Example 5\")\nforce_body = None\nif st.button(\"Go to Body\"):\n force_body = \"Body\"\nscroll_navbar(\n anchor_ids,\n key=\"5\",\n anchor_icons=anchor_icons,\n orientation=\"horizontal\",\n force_anchor=force_body)\n\n# 6. Retrieve active anchor\nwith st.sidebar:\n st.subheader(\"Example 6\")\n active_anchor = scroll_navbar(\n anchor_ids,\n key=\"navbar6\",\n orientation=\"vertical\")\n st.write(f\"{active_anchor} is active\")\n\n# Setup dummy page\nfor anchor_id in anchor_ids:\n st.subheader(anchor_id,anchor=anchor_id)\n st.write(\"content \" * 100)\n```\n\n### Styles Overrides\nThe override_styles argument allows you to customize the styles for scroll_navbar component. This property accepts an object containing specific style overrides that will be merged with the base styles defined in the component. By using this option, you can modify the appearance of the navigation bar to better fit your design requirements.\n\nBelow is a list of style keys available for customization:\n\n- `navbarButtonBase`: Base button styling with dark background, white text, pointer cursor, and smooth color transitions.\n- `navbarButtonHorizontal` & `navbarButtonVertical`: Orientation-specific properties for horizontal or vertical button alignment.\n- `navbarButtonActive`: Style for active anchor buttons. Sets the background color and font weight.\n- `navbarButtonHover`: Style for hovered buttons. Sets the background colors and font weight.\n- `navigationBarBase`: Core styling for the navigation bar container, setting background, padding, and flexbox layout.\n- `navigationBarHorizontal` & `navigationBarVertical`: Orientation-specific properties for the navigation bar.\n\n## Contributions\n\nContributions are welcome! If you\u2019d like to contribute, follow these steps:\n\n1. Fork the repository.\n2. Create a new branch for your feature or bugfix.\n3. Make your changes and commit them with clear messages.\n4. Open a pull request, and provide a detailed description of your changes.\n\nFeel free to create issues or feature requests as well.\n\nThis component is built on React.\nIt uses parent DOM injection to enable cross-origin interactions (see ./streamlit_scroll_navigation/\\_\\_init__.py).\nThe API and stylesx are inspired by victoryhb's [streamlit-option-menu](https://github.com/victoryhb/streamlit-option-menu).\n\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Streamlit component for single page navigation scrolling.",
"version": "1.0.3",
"project_urls": null,
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "5e3ffa68d4035b15c36644b1d14929b10a21e8e89befd68e95e1cc26d1b206c3",
"md5": "247e7ab4b8b94d60ed72ab63bdfb9326",
"sha256": "72027ff0dc672c0fb2d04dee3c7137ee3e3f820b557a7042880138072e973387"
},
"downloads": -1,
"filename": "streamlit_scroll_navigation-1.0.3-py3-none-any.whl",
"has_sig": false,
"md5_digest": "247e7ab4b8b94d60ed72ab63bdfb9326",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.7",
"size": 951070,
"upload_time": "2024-10-21T15:46:43",
"upload_time_iso_8601": "2024-10-21T15:46:43.277524Z",
"url": "https://files.pythonhosted.org/packages/5e/3f/fa68d4035b15c36644b1d14929b10a21e8e89befd68e95e1cc26d1b206c3/streamlit_scroll_navigation-1.0.3-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "bda4c47c16a85355cf8edd73b7bba4fe51e47f21500a4a0432b617f63cfef879",
"md5": "c6a752e14a61906c893200b752d85cf5",
"sha256": "64b90e5cd22ceca7fb9761e88c1ff443b04b7a8cb6c244cf8f0ce2df2af9276b"
},
"downloads": -1,
"filename": "streamlit_scroll_navigation-1.0.3.tar.gz",
"has_sig": false,
"md5_digest": "c6a752e14a61906c893200b752d85cf5",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.7",
"size": 949139,
"upload_time": "2024-10-21T15:46:45",
"upload_time_iso_8601": "2024-10-21T15:46:45.414339Z",
"url": "https://files.pythonhosted.org/packages/bd/a4/c47c16a85355cf8edd73b7bba4fe51e47f21500a4a0432b617f63cfef879/streamlit_scroll_navigation-1.0.3.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-10-21 15:46:45",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "streamlit-scroll-navigation"
}
