Navbar

A floating top navigation bar: a logo, center links with scroll-spy and active-link styling, theme/language control slots, and auth buttons with a built-in mobile menu. Links are plain data (NavLink[]), and navigation goes through the configured Link adapter. It manages its own mobile-menu state.

Import

1import { Navbar } from "@yuhuanowo/yunui/ai";

Basic

The bar is fixed to the top of the viewport. Provide links and an appName; the host supplies routing through the adapters.

Minimal variant

Use variant="minimal" to drop the center links and auth buttons — useful for auth or onboarding flows.

Slots

The bar is built for hosts that need more than a logo and links. Each slot is optional; leave them off and nothing changes.

These exist because two apps forked this component rather than use it: YunUI's own site needed a mark-only brand and a GitHub link, and YunNEWS needed a search button. Neither was expressible, so both copied the bar. That is a design failure in the API, not in the consumers — the slots are the fix.

1<Navbar
2  appName="YunUI"
3  brand={<Logo size={24} />}
4  links={NAV_LINKS}
5  currentPath={pathname}
6  actions={<GithubLink />}
7  languageSwitcher={<LanguageSwitcher variant="pill" … />}
8  mobileMenuFooter={
9    <div className="flex items-center justify-between px-2 py-1">
10      <LanguageSwitcher variant="pill" … />
11      <GithubLink />
12    </div>
13  }
14/>

Props