{"id":14959249,"url":"https://github.com/surjithctly/astro-navbar","last_synced_at":"2025-04-08T08:14:47.953Z","repository":{"id":65151863,"uuid":"584412220","full_name":"surjithctly/astro-navbar","owner":"surjithctly","description":" Astro-Navbar is a fully responsive headless navigation bar for Astro. It supports mobile responsive toggle and dropdowns.","archived":false,"fork":false,"pushed_at":"2024-10-18T16:24:17.000Z","size":126,"stargazers_count":163,"open_issues_count":2,"forks_count":12,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-30T01:05:11.520Z","etag":null,"topics":["astro","dropdown","headless","mobile","navbar","navigation","responsive","toggle","ui"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/astro-navbar","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/surjithctly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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":"2023-01-02T13:50:31.000Z","updated_at":"2024-10-28T02:19:48.000Z","dependencies_parsed_at":"2023-10-16T12:42:49.946Z","dependency_job_id":"ab5320e7-c8a9-43c2-bb74-5d467ca7bc98","html_url":"https://github.com/surjithctly/astro-navbar","commit_stats":{"total_commits":56,"total_committers":9,"mean_commits":6.222222222222222,"dds":0.2678571428571429,"last_synced_commit":"c3e852b2aceaa753e970f414ac6a8daa5846e274"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surjithctly%2Fastro-navbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surjithctly%2Fastro-navbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surjithctly%2Fastro-navbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surjithctly%2Fastro-navbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/surjithctly","download_url":"https://codeload.github.com/surjithctly/astro-navbar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246591781,"owners_count":20801984,"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":["astro","dropdown","headless","mobile","navbar","navigation","responsive","toggle","ui"],"created_at":"2024-09-24T13:19:15.837Z","updated_at":"2025-04-01T05:35:43.553Z","avatar_url":"https://github.com/surjithctly.png","language":"Astro","readme":"# Astro-Navbar\n\nAstro-Navbar is a fully responsive and accessible headless navigation bar for Astro, supporting nested dropdowns and mobile-responsive toggles.\n\n### Live Demos\n\n- [**Stackblitz**](https://stackblitz.com/edit/github-jpfnv9?file=src/pages/index.astro)\n- [**Astroship Template**](https://astroship.web3templates.com/)\n\n## Installation\n\n```bash\nnpm install astro-navbar\n# or\npnpm add astro-navbar\n```\n\n## Basic Usage\n\nEnsure you have the `.hidden` class in your CSS. If not, add the following:\n\n```css\n.hidden {\n  display: none;\n}\n```\n\nThen integrate the navigation bar:\n\n```astro\n---\nimport { Astronav, MenuItems, MenuIcon, Dropdown, DropdownItems, DropdownSubmenu } from \"astro-navbar\";\n---\n\n\u003cdiv\u003e\n  \u003cAstronav\u003e\n    \u003cdiv class=\"flex justify-between\"\u003e\n      \u003ca\u003eYour Logo\u003c/a\u003e\n      \u003cMenuIcon class=\"w-4 h-4 text-gray-800\" /\u003e\n    \u003c/div\u003e\n    \u003cMenuItems class=\"hidden lg:flex\"\u003e\n      \u003cul\u003e\n        \u003cli\u003eHome\u003c/li\u003e\n        \u003cli\u003eAbout\u003c/li\u003e\n        \u003cli\u003e\n          \u003cDropdown class=\"group\"\u003e\n            \u003cbutton\u003e\n              \u003cspan\u003e Services \u003c/span\u003e\n              \u003c!-- You can style when dropdown is `open` --\u003e\n              \u003csvg class=\"group-open:rotate-180\"\u003e...arrow..\u003c/svg\u003e\n            \u003c/button\u003e\n            \u003cDropdownItems\u003e\n              \u003cdiv class=\"absolute top-0\"\u003e\n                \u003cul\u003e\n                  \u003cli\u003eMenu 1\u003c/li\u003e\n                  \u003cli\u003eMenu 2\u003c/li\u003e\n                  \u003cli\u003e\n                    \u003cDropdownSubmenu\u003e\n                      \u003cbutton\u003eSubmenu\u003c/button\u003e\n                      \u003cDropdownItems\u003e\n                        \u003cul\u003e\n                          \u003cli\u003eSub Menu 1\u003c/li\u003e\n                          \u003cli\u003eSub Menu 2\u003c/li\u003e\n                        \u003c/ul\u003e\n                      \u003c/DropdownItems\u003e\n                    \u003c/DropdownSubmenu\u003e\n                  \u003c/li\u003e\n                \u003c/ul\u003e\n              \u003c/div\u003e\n            \u003c/DropdownItems\u003e\n          \u003c/Dropdown\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/MenuItems\u003e\n  \u003c/Astronav\u003e\n\u003c/div\u003e\n```\n\n## Customization\n\n### Styling\n\nEvery component, except `Astronav`, supports the `class` attribute for custom styling. The `\u003cDropdown/\u003e` component will have an `aria-expanded` attribute for accessibility and an `open` class \u0026 attribute when shown. This can be styled with CSS or utilities like Tailwind CSS's `group-open`.\n\n### Custom Icons\n\nTo use custom icons:\n\n```astro\n---\nimport { Astronav, MenuIcon, OpenIcon, CloseIcon } from \"astro-navbar\";\n---\n\n\u003cAstronav\u003e\n  ...\n  \u003cMenuIcon\u003e\n    \u003cOpenIcon\u003e\n      \u003csvg\u003e...\u003c/svg\u003e\n    \u003c/OpenIcon\u003e\n    \u003cCloseIcon\u003e\n      \u003csvg\u003e...\u003c/svg\u003e\n    \u003c/CloseIcon\u003e\n  \u003c/MenuIcon\u003e\n  ...\n\u003c/Astronav\u003e\n```\n\n### Custom Icons for Menu\n\nTo add custom icons for menu, you can use `OpenIcon` and `CloseIcon` inside `MenuIcon`. Here's an example. You can also pass custom icon components like `astro-icon` here.\n\n```jsx\n---\nimport { Astronav, MenuIcon, OpenIcon, CloseIcon } from \"astro-navbar\";\n---\n\n \u003cAstronav\u003e\n  ...\n  \u003cMenuIcon\u003e\n    \u003cOpenIcon\u003e\n      \u003csvg\u003e...\u003c/svg\u003e\n    \u003c/OpenIcon\u003e\n    \u003cCloseIcon\u003e\n      \u003csvg\u003e...\u003c/svg\u003e\n    \u003c/CloseIcon\u003e\n  \u003c/MenuIcon\u003e\n  ...\n  \u003c/Astronav\u003e\n```\n\n## Using with Tailwind CSS\n\nAstro-Navbar pairs well with Tailwind CSS.\n\n\u003cdetails\u003e\n\u003csummary\u003eMinimal Usage Example with Tailwind CSS\u003c/summary\u003e\n\n```astro\n---\nimport { Astronav, MenuItems, MenuIcon,  Dropdown, DropdownItems } from \"astro-navbar\";\n---\n\n\u003cheader class=\"lg:flex p-5  gap-5\"\u003e\n  \u003cAstronav\u003e\n    \u003cdiv class=\"flex w-full justify-between\"\u003e\n      \u003ca\u003eYour Logo\u003c/a\u003e\n      \u003cdiv class=\"block lg:hidden\"\u003e\n        \u003cMenuIcon class=\"w-4 h-4 text-gray-800\" /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cMenuItems class=\"hidden lg:flex\"\u003e\n      \u003cul class=\"flex flex-col lg:flex-row lg:gap-5\"\u003e\n        \u003cli\u003eHome\u003c/li\u003e\n        \u003cli\u003eAbout\u003c/li\u003e\n        \u003cli\u003e\n          \u003cDropdown class=\"group\"\u003e\n            \u003cbutton class=\"flex items-center\"\u003e\n              \u003cspan\u003e Services \u003c/span\u003e\n              \u003csvg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"3\"\n                stroke=\"currentColor\"\n                class=\"w-3 h-3 mt-0.5 group-open:rotate-180\"\u003e\n                \u003cpath\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\u003e\u003c/path\u003e\n              \u003c/svg\u003e\n            \u003c/button\u003e\n            \u003cDropdownItems class=\"relative\"\u003e\n              \u003cdiv class=\"absolute top-0\"\u003e\n                \u003cul\u003e\n                  \u003cli\u003eMenu 1\u003c/li\u003e\n                  \u003cli\u003eMenu 2\u003c/li\u003e\n                  \u003cli\u003eMenu 3\u003c/li\u003e\n                \u003c/ul\u003e\n              \u003c/div\u003e\n            \u003c/DropdownItems\u003e\n          \u003c/Dropdown\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/MenuItems\u003e\n  \u003c/Astronav\u003e\n\u003c/header\u003e\n```\n\n\u003c/details\u003e\n\n## Utilities\n\nSome related utilities are provided for convenience.\n\n### Sticky Header\n\nTo make the header sticky, you can use the `\u003cStickyHeader /\u003e` component. This will help you to add custom classes to the header when scrolled such as `sticky`. Since this is a headless component, no sticky classes has been added by default. You can add your own classes. This utility adds a tiny JS snippet to detect scroll position in a performant way.\n\nHere's an example:\n\n```js\n// Wrap the header with sticky header (renders as \u003cheader\u003e...\u003c/header\u003e)\n\n\u003cStickyHeader\n  // default class. applied all the time. No changes\n  class=\"sticky top-0 border-b z-20 transition-all\"\n  // scroll threshold to enable active class\n  scrollY={50}\n  // initial classes which will be removed when scrollY reached\n  defaultClass=\"py-5 border-transparent\"\n  // active classes to add when scrollY reached.\n  //  \"is-active\" class will be added by default\n  activeClass=\"py-2 bg-white/80 border-gray-200 backdrop-blur-lg\"\u003e\n  // ...\n  \u003cAstronav\u003e...\u003c/Astronav\u003e\n  // ...\n\u003c/StickyHeader\u003e\n```\n\n## Options\n\nHere are the supported options / props for this plugin.\n\n### Close Menu on Click\n\nYou can add the `closeOnClick` props to the `Astronav` component if you want to close the menu on clicking the item. This is useful on mobile where you have links to the same page like `#about` and want to close menu after click.\n\n```js\n// Close whole menu on clicking a menu item inside (on mobile)\n\n\u003cAstronav closeOnClick\u003e...\u003c/Astronav\u003e\n```\n\n## Contribute\n\nPlease create an issue.\n\n## Credits\n\nCopyright ©️ 2023-2099. Surjith S M.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurjithctly%2Fastro-navbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurjithctly%2Fastro-navbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurjithctly%2Fastro-navbar/lists"}