Navigation Menu

import * as NavigationMenu from "@flowstack-ui/brick/navigation-menu";
import "@flowstack-ui/brick/styles.css";

The module-namespace import is safe to compose from a React Server Component: each part remains a focused Client Component while the containing page remains server-rendered. The legacy import { NavigationMenu } runtime object remains available for client-owned modules.

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/navigation-menu.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Controls are paintless until hover, focus, open, or active. Links and triggers use 32/44/48px sm/md/lg minimums. Compact chevrons communicate disclosure, current links use a one-pixel underline, and the measured IndicatorArrow connects the open trigger to the Viewport without becoming a second selection bar. The Viewport uses the restrained shared control radius by default; consumers that need a different brand treatment can set --brick-navigation-menu-viewport-radius without adding a behavioral variant. In vertical orientation, the Viewport follows Atom's measured active-trigger offset so the connector stays attached while panels of different heights replace one another.

Link variant="panel" turns the same native destination into a full-width, wrapping link frame for concise rich content. Place one direct Surface child inside it so Surface owns background, inset, border, elevation, and radius while the Link owns the complete click, touch, and focus target. Never place another link or control inside it. If a direct Surface is omitted, the Link keeps its own visible focus ring rather than leaving keyboard focus invisible. In horizontal orientation, Atom centers the Viewport on the active Trigger and collision-shifts it inside the visible browser boundary. Brick uses the same physical geometry for the Indicator arrow in LTR and RTL. Set the inherited collisionPadding prop on Viewport to change its eight-pixel boundary gap.

<NavigationMenu.Link href="/services" variant="panel">
  <Surface inset="sm" level="subtle" radius="surface">
    <VStack gap="2">
      <Text variant="eyebrow">One accountable team</Text>
      <Text weight="semibold">Explore every service</Text>
      <Text tone="secondary" variant="body-sm">
        One destination with concise supporting context.
      </Text>
    </VStack>
  </Surface>
</NavigationMenu.Link>

See the component playground for defaults, sizes, anatomy, state, composition, customization, responsive, RTL, and preference evidence.

Popup geometry stays centered on the active Trigger when space permits, then collision-shifts and constrains itself to the visible boundary. Narrow layouts preserve usable targets, arrow alignment, zoom, and writing direction; applications decide whether the pattern belongs in their mobile information architecture.