Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/surjithctly/astro-navbar
Astro-Navbar is a fully responsive headless navigation bar for Astro. It supports mobile responsive toggle and dropdowns.
https://github.com/surjithctly/astro-navbar
astro dropdown headless mobile navbar navigation responsive toggle ui
Last synced: 6 days ago
JSON representation
Astro-Navbar is a fully responsive headless navigation bar for Astro. It supports mobile responsive toggle and dropdowns.
- Host: GitHub
- URL: https://github.com/surjithctly/astro-navbar
- Owner: surjithctly
- Created: 2023-01-02T13:50:31.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-18T16:24:17.000Z (2 months ago)
- Last Synced: 2024-10-30T01:05:11.520Z (about 2 months ago)
- Topics: astro, dropdown, headless, mobile, navbar, navigation, responsive, toggle, ui
- Language: Astro
- Homepage: https://www.npmjs.com/package/astro-navbar
- Size: 123 KB
- Stars: 163
- Watchers: 4
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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";
---
- Home
- About
-
Services
- Menu 1
- Menu 2
- Menu 3
```
## Utilities
Some related utilities are provided for convenience.
### Sticky Header
To make the header sticky, you can use the `` 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.
Here's an example:
```js
// Wrap the header with sticky header (renders as ...)
// ...
...
// ...
```
## Options
Here are the supported options / props for this plugin.
### Close Menu on Click
You 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.
```js
// Close whole menu on clicking a menu item inside (on mobile)
...
```
## Contribute
Please create an issue.
## Credits
Copyright ©️ 2023-2099. Surjith S M.