# Astro-Navbar
Astro-Navbar is a fully responsive and accessible headless navigation bar for Astro, supporting nested dropdowns and mobile-responsive toggles.
### Live Demos
- [**Stackblitz**](https://stackblitz.com/edit/github-jpfnv9?file=src/pages/index.astro)
- [**Astroship Template**](https://astroship.web3templates.com/)
## Installation
```bash
npm install astro-navbar
# or
pnpm add astro-navbar
```
## Basic Usage
Ensure you have the `.hidden` class in your CSS. If not, add the following:
```css
.hidden {
display: none;
}
```
Then integrate the navigation bar:
```astro
---
import { Astronav, MenuItems, MenuIcon, Dropdown, DropdownItems, DropdownSubmenu } from "astro-navbar";
---
```
## Customization
### Styling
Every component, except `Astronav`, supports the `class` attribute for custom styling. The `` component will have an `aria-expanded` attribute for accessibility and an `open` class & attribute when shown. This can be styled with CSS or utilities like Tailwind CSS's `group-open`.
### Custom Icons
To use custom icons:
```astro
---
import { Astronav, MenuIcon, OpenIcon, CloseIcon } from "astro-navbar";
---
...
...
```
### Custom Icons for Menu
To 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.
```jsx
---
import { Astronav, MenuIcon, OpenIcon, CloseIcon } from "astro-navbar";
---
...
...
```
## Using with Tailwind CSS
Astro-Navbar pairs well with Tailwind CSS.
Minimal Usage Example with Tailwind CSS
```astro
---
import { Astronav, MenuItems, MenuIcon, Dropdown, DropdownItems } from "astro-navbar";
---