AI
Navbar
A floating top navigation bar with scroll-spy links, control slots, auth buttons, and a mobile menu.
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
import { 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.
Basic
Minimal variant
Use variant="minimal" to drop the center links and auth buttons — useful for auth or onboarding flows.
Minimal variant
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| appName* | string | — | Brand name shown next to the logo. |
| currentPath | string | / | Current route, used for active-link + scroll-spy. |
| homeHref | string | / | Where the logo links to. |
| labels | { signIn?: string; signUp?: string; menu?: string | undefined; } | undefined | — | Localized auth labels. |
| languageSwitcher | ReactNode | — | Right-side control slots; the host injects the configured switcher. |
| links | NavLink[] | [] | Center navigation links. The host builds these from branding/flags/i18n. |
| loginHref | string | /login | Sign-in link destination. |
| logoSrc | string | /favicon.ico | Logo image src (default: /favicon.ico). |
| signupHref | string | /signup | Sign-up link destination. |
| themeToggle | ReactNode | — | Defaults to YunUI's ThemeToggle. |
| variant | "public" | "minimal" | public | `public` (full nav + auth) or `minimal` (no links/auth). |