Components
NavigationMenu
A site-wide navigation component with dropdown panels, viewport animations, and responsive collapse. Built on Radix NavigationMenu.
import {
NavigationMenu, NavigationMenuList, NavigationMenuItem,
NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink,
} from "@sigil-ui/components";
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Products</NavigationMenuTrigger>
<NavigationMenuContent>
<Stack gap={8} className="p-4 w-[400px]">
<NavigationMenuLink href="/components">Components</NavigationMenuLink>
<NavigationMenuLink href="/presets">Presets</NavigationMenuLink>
</Stack>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
<NavigationMenuContent>
<SigilGrid columns={2} gap={12} className="p-4 w-[500px]">
<SigilGridCell>
<h4>Components</h4>
<p className="text-sm text-[var(--s-text-muted)]">40+ styled components</p>
</SigilGridCell>
<SigilGridCell>
<h4>Presets</h4>
<p className="text-sm text-[var(--s-text-muted)]">31 curated themes</p>
</SigilGridCell>
</SigilGrid>
</NavigationMenuContent>
| CSS Variable | Used for |
|---|
--s-surface | Content panel background |
--s-surface-elevated | Link hover background |
--s-text | Link text |
--s-text-muted | Description text |
--s-border | Panel border |
--s-radius-lg | Panel border radius |
--s-shadow-lg | Panel elevation |
--s-duration-normal | Viewport animation |
--s-ease-default | Animation easing |
| Prop | Type | Default | Description |
|---|
className | string | — | Additional CSS classes |
children | ReactNode | — | Trigger label |
| Prop | Type | Default | Description |
|---|
href | string | — | Link destination |
active | boolean | false | Active page indicator |
className | string | — | Additional CSS classes |
children | ReactNode | — | Link content |
role="navigation" with aria-label
- Arrow key navigation between menu items
- Escape closes open panels and returns focus to trigger