Prop	Type	Required	Description
children	React.ReactNode	no	—
side	NavigationMenuSide	no	Preferred side for the dropdown panel. Default bottom.
align	NavigationMenuAlign	no	Alignment. Default center.
sideOffset	number	no	Gap between the bar and the panel, in px. Default 8.
anchor	BasePositionerProps["anchor"]	no	What to position against. Defaults to the component's own trigger.
positionMethod	BasePositionerProps["positionMethod"]	no	absolute (default) or fixed. Use fixed to escape a clipping ancestor.
alignOffset	BasePositionerProps["alignOffset"]	no	Offset along the alignment axis, in px. Pairs with align.
collisionBoundary	BasePositionerProps["collisionBoundary"]	no	The element the popup must stay inside. Defaults to the viewport — set it to a scroll container so the popup collides with the panel, not the window.
collisionPadding	BasePositionerProps["collisionPadding"]	no	Inset from the collision boundary, in px.
collisionAvoidance	BasePositionerProps["collisionAvoidance"]	no	Which collision strategy runs per axis (flip, shift, none).
sticky	BasePositionerProps["sticky"]	no	Keep the popup glued to the anchor while it scrolls out of view.
arrowPadding	BasePositionerProps["arrowPadding"]	no	Minimum distance from the popup's corner to the arrow, in px.
disableAnchorTracking	BasePositionerProps["disableAnchorTracking"]	no	Stop re-measuring when the anchor moves. Cheaper, but goes stale.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import {
    NavigationMenu,
    NavigationMenuItem,
    NavigationMenuTrigger,
    NavigationMenuContent,
    NavigationMenuLink,
} from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

export function NavigationMenuDemo() {
    return (
        <Section title="Real use · site nav with a mega-menu panel">
            <NavigationMenu>
                <NavigationMenuItem>
                    <NavigationMenuTrigger>Products</NavigationMenuTrigger>
                    <NavigationMenuContent>
                        <ul className="grid w-80 gap-1 p-2">
                            <li>
                                <a href="#" className="block rounded-field p-2 hover:bg-base-200">
                                    <div className="font-medium">Components</div>
                                    <div className="text-xs opacity-60">
                                        95+ primitives on one token system.
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" className="block rounded-field p-2 hover:bg-base-200">
                                    <div className="font-medium">Builder</div>
                                    <div className="text-xs opacity-60">
                                        Drag-and-drop pages, no code.
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </NavigationMenuContent>
                </NavigationMenuItem>
                <NavigationMenuItem>
                    <NavigationMenuLink href="#">Pricing</NavigationMenuLink>
                </NavigationMenuItem>
                <NavigationMenuItem>
                    <NavigationMenuLink href="#">Docs</NavigationMenuLink>
                </NavigationMenuItem>
            </NavigationMenu>
        </Section>
    );
}

Vanilla — node tree to HTML

NavigationMenu — each item is its own independent popover root (hover trigger; same bar-wide-coordination simplification as Menubar). Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("NavigationMenu", "navigation-menu", { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "navigation-menu navigation-menu-primary" rather than passing a colour as a prop.

Takes children: yes
Hydrated by: nothing — this one is static markup

The full API for Navigation Menu, on every path, is available through the Silica MCP server.

Navigation Menu

Real use · site nav with a mega-menu panel

Using Navigation Menu

Plain HTML — CSS classes

React

Props

Source of the demo above

Vanilla — node tree to HTML