Astro-Navbar is a fully accessible responsive headless navigation bar for Astro. It supports mobile responsive toggle and dropdowns.
Live Demo on Astroship Template →
npm install astro-navbar
# or
pnpm add astro-navbar
---
import { Astronav, MenuItems, MenuIcon, Dropdown, DropdownItems } from "astro-navbar";
---
<div>
<Astronav>
<div class="flex justify-between">
<a>Your Logo</a>
<MenuIcon class="w-4 h-4 text-gray-800" />
</div>
<!--
// add `hidden` class by default for mobile
// `lg:flex` is to make it visible in desktop
// You may use custom CSS instead.
-->
<MenuItems class="hidden lg:flex">
<ul>
<li>Home</li>
<li>About</li>
<li>
<Dropdown class="group">
<button>
<span> Services </span>
<!-- You can style when dropdown is `open` -->
<svg class="group-open:rotate-180">...arrow..</svg>
</button>
<DropdownItems>
<div class="absolute top-0">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</DropdownItems>
</Dropdown>
</li>
</ul>
</MenuItems>
</Astronav>
</div>
This plugin assumes you have a .hidden
class in the CSS. If not, add the following to your CSS
.hidden {
display: none;
}
Every Component expect Astronav
supports a class
attribute which you can style as needed.
<Dropdown/>
div will add a aria-expanded
attribute for Accessibility as well as an open
class & an attribute with name open
. Here's how it will look like when a dropdown is shown.
<div class="... open" aria-expanded="true" open></div>
So you can style based on both class or the open
attribute (works well with tailwind css group-open
).
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.
---
import { Astronav, MenuIcon, OpenIcon, CloseIcon } from "astro-navbar";
---
<Astronav>
...
<MenuIcon>
<OpenIcon>
<svg>...</svg>
</OpenIcon>
<CloseIcon>
<svg>...</svg>
</CloseIcon>
</MenuIcon>
...
</Astronav>
This plugin should work well with regular CSS as well as Tailwind CSS. You can add group
classes to modify dropdown based on the open
attribute.
Minimal Usage Example with Tailwind CSS
---
import { Astronav, MenuItems, MenuIcon, Dropdown, DropdownItems } from "astro-navbar";
---
<header class="lg:flex p-5 gap-5">
<Astronav>
<div class="flex w-full justify-between">
<a>Your Logo</a>
<div class="block lg:hidden">
<MenuIcon class="w-4 h-4 text-gray-800" />
</div>
</div>
<MenuItems class="hidden lg:flex">
<ul class="flex flex-col lg:flex-row lg:gap-5">
<li>Home</li>
<li>About</li>
<li>
<Dropdown class="group">
<button class="flex items-center">
<span> Services </span>
<svg
xmlns="https://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="3"
stroke="currentColor"
class="w-3 h-3 mt-0.5 group-open:rotate-180">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
</svg>
</button>
<DropdownItems class="relative">
<div class="absolute top-0">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</DropdownItems>
</Dropdown>
</li>
</ul>
</MenuItems>
</Astronav>
</header>
Please create an issue.
Copyright ©️ 2023-2099. Surjith S M.