Thành phần
Navigation Menu
Navigation menu on Base UI: Barlow caps bar, heavy rule under the current page, flat ruled panel, no hover effect.
Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.
Xem trước
Install
bash
npx shadcn add @eloquent/navigation-menuUsage
tsx
import {
NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink,
NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
<NavigationMenu aria-label="Main">
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>News</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/news/politics">Politics</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="/about" active className={navigationMenuTriggerStyle()}>About</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>NavigationMenu renders its own viewport. Pass render={<Link href="…" />} to NavigationMenuLink to use your router's link, and active on the link of the current page.
States
| State | Treatment |
|---|---|
| Current page | 3px ink rule and aria-current="page" |
| Open trigger | aria-expanded, a turned chevron and a tint-1 fill |
| Pressed | Ink fill with paper text |
| Focus | 2px ink outline, 2px offset |
| Disabled | Halftone text, cursor-not-allowed |
Keyboard
| Key | Action |
|---|---|
| Tab / Shift+Tab | Move through triggers and links, and into an open panel |
| Arrow Left / Right | Move between the triggers |
| Enter / Space | Open the focused trigger's panel, or follow the focused link |
| Escape | Close the panel and return focus to its trigger |
Vietnamese
Ink adaptation
Upstream draws a rounded, shadowed popover with a sliding arrow and animated size. Here the bar sits on a hairline with Barlow capitals and the current page carries the heavy 3px rule. The panel is a square paper box with a 1px ink rule, no shadow and no arrow; it fades with opacity only. Hover opens a panel (Base UI behaviour) but changes no item's look. Built on Base UI NavigationMenu.