Navigation menu
A collection of links for navigating websites.
Installation
npx shadcn@latest add https://spoke.georgedrury.co.uk/r/navigation-menuLineage
Anatomy
import {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuContent,
NavigationMenuLink,
} from "@/components/ui/navigation-menu"
export default () => (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger />
<NavigationMenuContent>
<NavigationMenuLink />
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
)Spoke utility classes
| Class | Fallback chain | Description |
|---|---|---|
--navigation-menu-trigger | var(--background) | Colour for menu trigger navigation variant |
--navigation-menu-trigger-radius | var(--radius-md) | Border radius for menu trigger |
--navigation-menu-viewport | var(--popover) | Colour for menu viewport navigation variant |
--navigation-menu-viewport-foreground | var(--popover-foreground) | Text/icon colour for menu viewport navigation variant |
--navigation-menu-border | var(--border) | Border colour for menu navigation variant |
--navigation-menu-viewport-radius | var(--radius-md) | Border radius for menu viewport |
--shadow-navigation-menu | var(--shadow-md) | Box shadow for navigation menu |