Aedis UI

Navigation Menu

Top navigation for a public site, with panels of grouped links.

Installation

Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:

npx @aedis/cli@0.1.0 init

Import the theme once in your global CSS, after Tailwind:

app/globals.css
@import "tailwindcss";@import "./styles/aedis-theme.css";

Then add the component:

npx @aedis/cli@0.1.0 add navigation-menu# pnpm dlx @aedis/cli@0.1.0 add navigation-menu · yarn dlx @aedis/cli@0.1.0 add navigation-menu · bunx @aedis/cli@0.1.0 add navigation-menu

Props

PropTypeDefaultDescription
NavigationMenuLink hrefstring—Goes through safeUrl; a refused URL renders as text. External links get rel="noopener noreferrer" and a marker.
NavigationMenuItem activeboolean—The current section; the indicator rests under it when no panel is open.
align"start" | "center" | "end""start"Panel alignment under the trigger.
labelsPartial<NavigationMenuLabels>—label: accessible name of the landmark.
...props@base-ui/react NavigationMenu props—Every prop of the underlying Base UI part, including render for composition.

Security

  • Every href goes through safeUrl: javascript:, data: and vbscript: never become links.
  • External links get rel="noopener noreferrer" and a visible arrow with screen-reader text, so people know they leave the site.