NavigationMenu

Accessible top-level site navigation with dropdown content panels. Wraps bits-ui NavigationMenu.

Example

Sub-components

NavigationMenu.Root

PropTypeDefaultDescription
classstring—Additional CSS classes

NavigationMenu.List

PropTypeDefaultDescription
classstring—Additional CSS classes

NavigationMenu.Item

PropTypeDefaultDescription
classstring—Additional CSS classes

NavigationMenu.Trigger

PropTypeDefaultDescription
classstring—Additional CSS classes

NavigationMenu.Content

PropTypeDefaultDescription
classstring—Additional CSS classes

NavigationMenu.Link

PropTypeDefaultDescription
hrefstring—Link destination
classstring—Additional CSS classes

Usage

<script>
  import { NavigationMenu } from '@chrissnell/chonky-ui';
</script>

<NavigationMenu.Root>
  <NavigationMenu.List>
    <NavigationMenu.Item>
      <NavigationMenu.Link href="/">Home</NavigationMenu.Link>
    </NavigationMenu.Item>
    <NavigationMenu.Item>
      <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
      <NavigationMenu.Content>
        <p>Dropdown content here.</p>
      </NavigationMenu.Content>
    </NavigationMenu.Item>
  </NavigationMenu.List>
</NavigationMenu.Root>