Navigation Menu
Build a site menu with expandable content panels.
Preview
Import
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from "@sigil-ui/components";Usage
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="/docs">Components</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>Sub-components
This component includes the following parts:
<NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-md | Radius md |
--s-text | Text |
--s-duration-fast | Duration fast |
--s-surface | Surface |
--s-primary | Primary |
--s-surface-elevated | Surface elevated |
--s-card-radius | Card radius |
--s-border-style | Border style |
--s-border | Border |
--s-background | Background |
--s-shadow-md | Shadow md |