Installation
Usage
import { FluidMenu } from "@/components/fluid-menu"
export function SiteMenu() {
return (
<FluidMenu
items={[
{ label: "Work", href: "/work", description: "Selected projects" },
{ label: "About", href: "/about" },
{ label: "Contact", href: "/contact" },
]}
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { label, href, description?, icon? }[] | — | The links. |
| brand | ReactNode | — | Shown at the start of the pill, e.g. your logo. |
| label | string | "Menu" | The pill's text while closed. |
| footer | ReactNode | — | Under the links, e.g. a call to action. |
| placement | "top" | "bottom" | "top" | Grow down from the top, or up from the bottom. |
| open / defaultOpen | boolean | — / false | Controlled or initial state. |
| onOpenChange | (open: boolean) => void | — | Called when it opens or closes. |
| navLabel | string | "Main" | Accessible name of the navigation. |
Accessibility
- A disclosure: the pill is a button with aria-expanded and aria-controls; the links are a labelled <nav> list.
- Opening moves focus to the first link; ↑/↓ move between links.
- Escape closes and returns focus to the pill; clicking away or tabbing out closes too.
- Opens and closes in place under prefers-reduced-motion.
Changelog
- v1.0.0Latest
First release.