- Home
- Primitives
- Navigation Menu
- Examples
Navigation Menu
Basic navigation menu example demonstrating core behavior.
Examples
import * as NavigationMenu from "@solidiom/navigation-menu"
;<NavigationMenu.Root>Navigation Menu content</NavigationMenu.Root>View source
export function NavigationMenuExample(props: NavigationMenuExampleProps) {
const copy = () => COPY[props.locale]
return (
<div ref={(el) => el.setAttribute("data-hydrated", "true")} class="navigation-menu-example">
<NavigationMenu.Root aria-label={copy().label}>
<NavigationMenu.List>
{copy().items.map((item) => (
<NavigationMenu.Item value={item.value}>
<NavigationMenu.Trigger>{item.trigger}</NavigationMenu.Trigger>
<NavigationMenu.Content>
<NavigationMenu.Link href="#">{item.link}</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Item>
))}
</NavigationMenu.List>
</NavigationMenu.Root>
</div>
)
}