{"id":20547210,"url":"https://github.com/gabrieltempass/streamlit-navigation-bar","last_synced_at":"2025-04-05T20:05:47.854Z","repository":{"id":219593001,"uuid":"749197066","full_name":"gabrieltempass/streamlit-navigation-bar","owner":"gabrieltempass","description":"A component that allows you to place a navigation bar in your Streamlit app.","archived":false,"fork":false,"pushed_at":"2024-05-13T21:37:06.000Z","size":32127,"stargazers_count":160,"open_issues_count":27,"forks_count":16,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-29T19:05:33.024Z","etag":null,"topics":["navbar","python","streamlit","streamlit-component","typescript","vite","vue"],"latest_commit_sha":null,"homepage":"https://streamlit.io/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gabrieltempass.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-27T21:13:35.000Z","updated_at":"2025-03-25T17:38:55.000Z","dependencies_parsed_at":"2024-03-12T22:45:07.961Z","dependency_job_id":"1334d84e-20a5-4180-b8c3-f73cb5303f34","html_url":"https://github.com/gabrieltempass/streamlit-navigation-bar","commit_stats":null,"previous_names":["gabrieltempass/streamlit-navigation-bar"],"tags_count":14,"template":false,"template_full_name":"gabrieltempass/streamlit-component-vue-vite-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrieltempass%2Fstreamlit-navigation-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrieltempass%2Fstreamlit-navigation-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrieltempass%2Fstreamlit-navigation-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrieltempass%2Fstreamlit-navigation-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gabrieltempass","download_url":"https://codeload.github.com/gabrieltempass/streamlit-navigation-bar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393568,"owners_count":20931812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["navbar","python","streamlit","streamlit-component","typescript","vite","vue"],"created_at":"2024-11-16T02:06:48.474Z","updated_at":"2025-04-05T20:05:47.835Z","avatar_url":"https://github.com/gabrieltempass.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![PyPI - Version](https://img.shields.io/pypi/v/streamlit-navigation-bar)](https://pypi.org/project/streamlit-navigation-bar/)\n[![Downloads](https://static.pepy.tech/badge/streamlit-navigation-bar/month)](https://pepy.tech/project/streamlit-navigation-bar)\n[![GitHub License](https://img.shields.io/github/license/gabrieltempass/streamlit-navigation-bar?color=blue)](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’s 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-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[![Example 1](https://github.com/gabrieltempass/streamlit-navigation-bar/raw/main/images/st_navbar_1.gif)](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 \u003e= 3.8**\n* **Streamlit \u003e= 1.33**\n* **[Streamlit Theme](https://github.com/gabrieltempass/streamlit-theme) \u003e= 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=\u0026labels=bug\u0026projects=\u0026template=bug_report.yml)\nor [requesting a feature](https://github.com/gabrieltempass/streamlit-navigation-bar/issues/new?assignees=\u0026labels=enhancement\u0026projects=\u0026template=feature_request.yml).\nYou can also just [ask a question](https://github.com/gabrieltempass/streamlit-navigation-bar/issues/new?assignees=\u0026labels=question\u0026projects=\u0026template=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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabrieltempass%2Fstreamlit-navigation-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgabrieltempass%2Fstreamlit-navigation-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabrieltempass%2Fstreamlit-navigation-bar/lists"}