[](https://pypi.org/project/streamlit-navigation-bar/)
[](https://pepy.tech/project/streamlit-navigation-bar)
[](https://github.com/gabrieltempass/streamlit-navigation-bar/blob/main/LICENSE)
# Streamlit Navigation Bar
**A component that allows you to place a navigation bar in your Streamlit app.**
The navbar was built to:
* Be simple to use
* Look great out of the box
* Apply custom styles
* Integrate with Streamlit’s UI
* Have a well-written documentation
It has some cool functionalities, like displaying an optional logo and external URLs. It also matches the active theme by default.
## Installation
Open a terminal and run:
``` bash
pip install streamlit-community-navigation-bar
```
## Example
Here is a basic example of how to use it:
``` python
import streamlit as st
from streamlit_navigation_bar import st_navbar
page = st_navbar(["Home", "Documentation", "Examples", "Community", "About"])
st.write(page)
```
[](https://st-navbar-1.streamlit.app/)
[**[App]**](https://st-navbar-1.streamlit.app/)
[**[Source]**](https://github.com/gabrieltempass/streamlit-navigation-bar/blob/main/examples/st_navbar_1/streamlit_app.py)
Jump to the [examples gallery](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/Examples) to see more demos of what the navbar is capable of.
## Documentation
The complete documentation is on the [GitHub Wiki](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki).
There, you can check:
* [API reference](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference)
* [Usage](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#usage)
* [Parameters](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#parameters)
* [Returns](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#returns)
* [Styles](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#styles)
* [Document Object Model](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#document-object-model)
* [CSS variables](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#css-variables)
* [Default style](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#default-style)
* [Maximum width](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#maximum-width)
* [Options](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#options)
* [Multipage](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/Multipage)
* [Streamlit's structure](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/Multipage#streamlits-structure)
* [Recommended structure](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/Multipage#recommended-structure)
* [Examples](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/Examples)
* [Roadmap](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/Roadmap)
## Requirements
To use the navigation bar component in your Streamlit app, you will need:
* **Python >= 3.8**
* **Streamlit >= 1.33**
* **[Streamlit Theme](https://github.com/gabrieltempass/streamlit-theme) >= 1.2.3**
* The CSS adjustment depends on the
[browser compatibility with the :has pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility)
## Contributing
You are welcome to help develop the Streamlit Navigation Bar! There are
multiple ways to contribute, such as [reporting a bug](https://github.com/gabrieltempass/streamlit-navigation-bar/issues/new?assignees=&labels=bug&projects=&template=bug_report.yml)
or [requesting a feature](https://github.com/gabrieltempass/streamlit-navigation-bar/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.yml).
You can also just [ask a question](https://github.com/gabrieltempass/streamlit-navigation-bar/issues/new?assignees=&labels=question&projects=&template=ask_question.yml),
or join the discussions in the [community forum](https://discuss.streamlit.io/t/new-component-streamlit-navigation-bar/66032).
To submit code for a pull request, make sure to read the
[guide on how to contribute](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/Contributing).
## References
The Streamlit Navigation Bar was made with:
* The [streamlit-component-vue-vite-template](https://github.com/gabrieltempass/streamlit-component-vue-vite-template),
by [@gabrieltempass](https://github.com/gabrieltempass)
* The [st-theme](https://github.com/gabrieltempass/streamlit-theme)
component, by [@gabrieltempass](https://github.com/gabrieltempass)
And based on:
* The [streamlit-option-menu](https://github.com/victoryhb/streamlit-option-menu/tree/master)
component, by [@victoryhb](https://github.com/victoryhb)
* The [styleable container](https://arnaudmiribel.github.io/streamlit-extras/extras/stylable_container/),
by [@LukasMasuch](https://github.com/LukasMasuch)
Raw data
{
"_id": null,
"home_page": "https://github.com/streamlit-community/streamlit-navigation-bar",
"name": "streamlit-community-navigation-bar",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.9",
"maintainer_email": null,
"keywords": null,
"author": "Gabriel Tem Pass",
"author_email": "redo_hint_0x@icloud.com",
"download_url": "https://files.pythonhosted.org/packages/a1/e5/a7512a31d98e375b3de23b8e0cadbd77aabe0446967e780da524213da8f2/streamlit_community_navigation_bar-4.6.0.tar.gz",
"platform": null,
"description": "[](https://pypi.org/project/streamlit-navigation-bar/)\n[](https://pepy.tech/project/streamlit-navigation-bar)\n[](https://github.com/gabrieltempass/streamlit-navigation-bar/blob/main/LICENSE)\n\n# Streamlit Navigation Bar\n\n**A component that allows you to place a navigation bar in your Streamlit app.**\n\nThe navbar was built to:\n* Be simple to use\n* Look great out of the box\n* Apply custom styles\n* Integrate with Streamlit\u2019s UI\n* Have a well-written documentation\n\nIt has some cool functionalities, like displaying an optional logo and external URLs. It also matches the active theme by default.\n\n## Installation\n\nOpen a terminal and run:\n\n``` bash\npip install streamlit-community-navigation-bar\n```\n\n## Example\n\nHere is a basic example of how to use it:\n``` python\nimport streamlit as st\nfrom streamlit_navigation_bar import st_navbar\n\npage = st_navbar([\"Home\", \"Documentation\", \"Examples\", \"Community\", \"About\"])\nst.write(page)\n```\n[](https://st-navbar-1.streamlit.app/)\n[**[App]**](https://st-navbar-1.streamlit.app/)\n[**[Source]**](https://github.com/gabrieltempass/streamlit-navigation-bar/blob/main/examples/st_navbar_1/streamlit_app.py)\n\nJump to the [examples gallery](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/Examples) to see more demos of what the navbar is capable of.\n\n## Documentation\n\nThe complete documentation is on the [GitHub Wiki](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki).\nThere, you can check:\n* [API reference](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference)\n * [Usage](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#usage)\n * [Parameters](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#parameters)\n * [Returns](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#returns)\n * [Styles](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#styles)\n * [Document Object Model](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#document-object-model)\n * [CSS variables](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#css-variables)\n * [Default style](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#default-style)\n * [Maximum width](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#maximum-width)\n * [Options](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/API-reference#options)\n* [Multipage](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/Multipage)\n * [Streamlit's structure](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/Multipage#streamlits-structure)\n * [Recommended structure](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/Multipage#recommended-structure)\n* [Examples](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/Examples)\n* [Roadmap](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/Roadmap)\n\n## Requirements\n\nTo use the navigation bar component in your Streamlit app, you will need:\n* **Python >= 3.8**\n* **Streamlit >= 1.33**\n* **[Streamlit Theme](https://github.com/gabrieltempass/streamlit-theme) >= 1.2.3**\n* The CSS adjustment depends on the\n [browser compatibility with the :has pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility)\n\n## Contributing\n\nYou are welcome to help develop the Streamlit Navigation Bar! There are\nmultiple ways to contribute, such as [reporting a bug](https://github.com/gabrieltempass/streamlit-navigation-bar/issues/new?assignees=&labels=bug&projects=&template=bug_report.yml)\nor [requesting a feature](https://github.com/gabrieltempass/streamlit-navigation-bar/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.yml).\nYou can also just [ask a question](https://github.com/gabrieltempass/streamlit-navigation-bar/issues/new?assignees=&labels=question&projects=&template=ask_question.yml),\nor join the discussions in the [community forum](https://discuss.streamlit.io/t/new-component-streamlit-navigation-bar/66032).\nTo submit code for a pull request, make sure to read the\n[guide on how to contribute](https://github.com/gabrieltempass/streamlit-navigation-bar/wiki/Contributing).\n\n## References\n\nThe Streamlit Navigation Bar was made with:\n* The [streamlit-component-vue-vite-template](https://github.com/gabrieltempass/streamlit-component-vue-vite-template),\n by [@gabrieltempass](https://github.com/gabrieltempass)\n* The [st-theme](https://github.com/gabrieltempass/streamlit-theme)\n component, by [@gabrieltempass](https://github.com/gabrieltempass)\n\nAnd based on:\n* The [streamlit-option-menu](https://github.com/victoryhb/streamlit-option-menu/tree/master)\n component, by [@victoryhb](https://github.com/victoryhb)\n* The [styleable container](https://arnaudmiribel.github.io/streamlit-extras/extras/stylable_container/),\n by [@LukasMasuch](https://github.com/LukasMasuch)\n",
"bugtrack_url": null,
"license": "MIT License",
"summary": "A component that allows you to place a navigation bar in your Streamlit app.",
"version": "4.6.0",
"project_urls": {
"Bug Tracker": "https://github.com/streamlit-community/streamlit-navigation-bar/issues",
"Community": "https://discuss.streamlit.io/t/new-component-streamlit-navigation-bar/66032",
"Documentation": "https://github.com/streamlit-community/streamlit-navigation-bar/wiki/API-reference",
"Homepage": "https://github.com/streamlit-community/streamlit-navigation-bar",
"Release notes": "https://github.com/streamlit-community/streamlit-navigation-bar/releases",
"Source Code": "https://github.com/streamlit-community/streamlit-navigation-bar"
},
"split_keywords": [],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "1c7ac8ee449f81aa9107a85d8dbe67906362075bb210c63f2a022af35b9ca137",
"md5": "fe364f73df181ba6bfd6da10b92a6c7f",
"sha256": "110dc78b43a04b328795b8607262f3cc6bf1f4d48f78e87d020b5d2c3449bf10"
},
"downloads": -1,
"filename": "streamlit_community_navigation_bar-4.6.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "fe364f73df181ba6bfd6da10b92a6c7f",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.9",
"size": 89197,
"upload_time": "2025-02-23T20:13:59",
"upload_time_iso_8601": "2025-02-23T20:13:59.607637Z",
"url": "https://files.pythonhosted.org/packages/1c/7a/c8ee449f81aa9107a85d8dbe67906362075bb210c63f2a022af35b9ca137/streamlit_community_navigation_bar-4.6.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "a1e5a7512a31d98e375b3de23b8e0cadbd77aabe0446967e780da524213da8f2",
"md5": "54fbb78857758d4abb4a12ada4bf9d6f",
"sha256": "25922462b0a11411999db157f8767fed7cf148b206112d954cdf4bda8db1c1d9"
},
"downloads": -1,
"filename": "streamlit_community_navigation_bar-4.6.0.tar.gz",
"has_sig": false,
"md5_digest": "54fbb78857758d4abb4a12ada4bf9d6f",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.9",
"size": 87674,
"upload_time": "2025-02-23T20:14:01",
"upload_time_iso_8601": "2025-02-23T20:14:01.787656Z",
"url": "https://files.pythonhosted.org/packages/a1/e5/a7512a31d98e375b3de23b8e0cadbd77aabe0446967e780da524213da8f2/streamlit_community_navigation_bar-4.6.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-02-23 20:14:01",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "streamlit-community",
"github_project": "streamlit-navigation-bar",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [
{
"name": "streamlit",
"specs": [
[
"==",
"1.33.0"
]
]
},
{
"name": "streamlit-navigation-bar",
"specs": [
[
"==",
"3.3.0"
]
]
}
],
"lcname": "streamlit-community-navigation-bar"
}
JSON
