├── .github └── workflows │ └── publish.yml ├── .gitignore ├── README.md ├── astro.config.mjs ├── examples ├── components │ └── navbar.astro ├── env.d.ts └── pages │ ├── contact.astro │ ├── index.astro │ └── layout.astro ├── index.ts ├── package.json ├── pnpm-lock.yaml ├── src ├── Astronav.astro └── components │ ├── CloseIcon.astro │ ├── Dropdown.astro │ ├── DropdownItems.astro │ ├── DropdownSubmenu.astro │ ├── MenuIcon.astro │ ├── MenuItems.astro │ ├── OpenIcon.astro │ └── StickyHeader.astro └── tailwind.config.cjs /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish to NPM 2 | on: 3 | release: 4 | types: [created] 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - name: Checkout 10 | uses: actions/checkout@v2 11 | - name: Setup Node 12 | uses: actions/setup-node@v2 13 | with: 14 | node-version: "16.x" 15 | registry-url: "https://registry.npmjs.org" 16 | - name: Publish package on NPM 📦 17 | run: npm publish 18 | env: 19 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # Dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # Compiled Sanity Studio 9 | /dist 10 | 11 | # Temporary Sanity runtime, generated by the CLI on every dev server start 12 | /.sanity 13 | 14 | # Logs 15 | /logs 16 | *.log 17 | 18 | # Coverage directory used by testing tools 19 | /coverage 20 | 21 | # Misc 22 | .DS_Store 23 | *.pem 24 | 25 | # Typescript 26 | *.tsbuildinfo 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Astro-Navbar 2 | 3 | Astro-Navbar is a fully responsive and accessible headless navigation bar for Astro, supporting nested dropdowns and mobile-responsive toggles. 4 | 5 | ### Live Demos 6 | 7 | - [**Stackblitz**](https://stackblitz.com/edit/github-jpfnv9?file=src/pages/index.astro) 8 | - [**Astroship Template**](https://astroship.web3templates.com/) 9 | 10 | ## Installation 11 | 12 | ```bash 13 | npm install astro-navbar 14 | # or 15 | pnpm add astro-navbar 16 | ``` 17 | 18 | ## Basic Usage 19 | 20 | Ensure you have the `.hidden` class in your CSS. If not, add the following: 21 | 22 | ```css 23 | .hidden { 24 | display: none; 25 | } 26 | ``` 27 | 28 | Then integrate the navigation bar: 29 | 30 | ```astro 31 | --- 32 | import { Astronav, MenuItems, MenuIcon, Dropdown, DropdownItems, DropdownSubmenu } from "astro-navbar"; 33 | --- 34 | 35 |