bx

Navigation Menu

A collection of links for navigating websites.

tsx 
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/docs">Introduction</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

NavigationMenu — barre horizontale de nav avec sub-panels au hover (pattern nav app publique — Vercel, shadcn.com header). Chaque top-level ouvre un panel plus large avec liens hiérarchiques ou preview de section.

CSS-only : le reveal du sub-panel utilise group-hover — pas d'island requis.

Installation

Terminal 
$ bext ui add navigation-menu

Usage

tsx 
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from "@bext-stack/ui/primitives"

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/docs">Introduction</NavigationMenuLink>
        <NavigationMenuLink href="/docs/installation">Installation</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Anatomy

<NavigationMenu>
  └── <NavigationMenuList>
      ├── <NavigationMenuItem>                       // group/nav-item
      │   ├── <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      │   └── <NavigationMenuContent>                // revealed group-hover
      │       └── <NavigationMenuLink href="/docs">Introduction</NavigationMenuLink>
      └── <NavigationMenuItem>...</NavigationMenuItem>

API Reference

NavigationMenu

Prop Type Default Description
viewport boolean true Rendre le viewport dynamique (radix pattern — no-op en PRISM CSS-only).

NavigationMenuList

Prop Type Default Description
className string — flex items-center gap-1.

NavigationMenuItem

Prop Type Default Description
className string — Wrapper group/nav-item relative.

NavigationMenuTrigger

Prop Type Default Description
className string — Button h-9 px-4, avec chevron down qui rotate au hover.

NavigationMenuContent

Prop Type Default Description
className string — Panel invisible → visible au hover parent. min-w-[220px], rounded-md border bg-popover.

NavigationMenuLink

Prop Type Default Description
href string — URL.
active boolean — data-active pour styling état actif.

NavigationMenuViewport / Indicator

Prop Type Default Description
— — — Placeholder pour parité API shadcn (radix). No-op en PRISM.

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute On Values Description
group/nav-item Item — Utilisé par group-hover: sur Content pour le reveal.
data-active Link présent si active bg-accent quand actif.

Keyboard

Key Action
Tab Focus les triggers un par un. Sub-panel NON révélé au focus (limitation CSS pure).
Enter Navigue si trigger est un .

Accessibility

Le reveal CSS-only ne se déclenche PAS au focus keyboard. Pour un vrai nav accessible, utiliser DropdownMenu (click) ou Popover.

Poser role="navigation" aria-label="Main" sur le NavigationMenu racine.

Try it live
Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser
Pure PRISM + real bext signals — fine-grained, no re-render.
← Menubar Pagination →