Navigation Menu

import { NavigationMenu } from "@hummingbirdui/react";

const components = ["Accordion", "Alert", "Button", "Card", "Dialog", "Tabs"];

export default function NavigationMenuDefault() {
  return (
    <NavigationMenu>
      <NavigationMenu.List>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger>Getting started</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <ul className="w-56">
              <li>
                <NavigationMenu.Link href="#">Introduction</NavigationMenu.Link>
              </li>
              <li>
                <NavigationMenu.Link href="#">Installation</NavigationMenu.Link>
              </li>
              <li>
                <NavigationMenu.Link href="#">Dark mode</NavigationMenu.Link>
              </li>
            </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger>Components</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <ul className="grid w-80 grid-cols-2">
              {components.map((component) => (
                <li key={component}>
                  <NavigationMenu.Link href="#">
                    {component}
                  </NavigationMenu.Link>
                </li>
              ))}
            </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#">Blocks</NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu>
  );
}

import { NavigationMenu } from "@hummingbirdui/react";

const features = [
  {
    title: "Analytics",
    description: "Track traffic, conversions and retention in real time.",
  },
  {
    title: "Automation",
    description: "Trigger workflows from events without writing code.",
  },
  {
    title: "Integrations",
    description: "Connect the tools your team already relies on.",
  },
  {
    title: "Security",
    description: "Single sign-on, audit logs and role-based access.",
  },
];

export default function NavigationMenuDescriptions() {
  return (
    <NavigationMenu>
      <NavigationMenu.List>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger>Product</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <ul className="grid w-96 grid-cols-2 gap-1">
              {features.map((feature) => (
                <li key={feature.title}>
                  <NavigationMenu.Link href="#">
                    <span className="font-medium">{feature.title}</span>
                    <span className="text-muted">{feature.description}</span>
                  </NavigationMenu.Link>
                </li>
              ))}
            </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#">Pricing</NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu>
  );
}

import { NavigationMenu } from "@hummingbirdui/react";

const menus = [
  { title: "Solutions", links: ["Marketing", "Sales", "Support"] },
  { title: "Resources", links: ["Blog", "Guides", "Changelog"] },
];

export default function NavigationMenuNoViewport() {
  return (
    <NavigationMenu viewport={false}>
      <NavigationMenu.List>
        {menus.map((menu) => (
          <NavigationMenu.Item key={menu.title}>
            <NavigationMenu.Trigger>{menu.title}</NavigationMenu.Trigger>
            <NavigationMenu.Content>
              <ul className="w-48">
                {menu.links.map((link) => (
                  <li key={link}>
                    <NavigationMenu.Link href="#">{link}</NavigationMenu.Link>
                  </li>
                ))}
              </ul>
            </NavigationMenu.Content>
          </NavigationMenu.Item>
        ))}
      </NavigationMenu.List>
    </NavigationMenu>
  );
}

import { NavigationMenu } from "@hummingbirdui/react";

export default function NavigationMenuActive() {
  return (
    <NavigationMenu>
      <NavigationMenu.List>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#" active>
            Overview
          </NavigationMenu.Link>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger>Settings</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <ul className="w-48">
              <li>
                <NavigationMenu.Link href="#">Profile</NavigationMenu.Link>
              </li>
              <li>
                <NavigationMenu.Link href="#" active>
                  Billing
                </NavigationMenu.Link>
              </li>
              <li>
                <NavigationMenu.Link href="#">
                  Notifications
                </NavigationMenu.Link>
              </li>
            </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#">Reports</NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu>
  );
}

import { NavigationMenu } from "@hummingbirdui/react";

const menus = [
  { title: "Products", links: ["Analytics", "Automation", "Reports"] },
  { title: "Company", links: ["About", "Careers", "Press"] },
];

export default function NavigationMenuIndicator() {
  return (
    <NavigationMenu>
      <NavigationMenu.List>
        {menus.map((menu) => (
          <NavigationMenu.Item key={menu.title}>
            <NavigationMenu.Trigger>{menu.title}</NavigationMenu.Trigger>
            <NavigationMenu.Content>
              <ul className="w-48">
                {menu.links.map((link) => (
                  <li key={link}>
                    <NavigationMenu.Link href="#">{link}</NavigationMenu.Link>
                  </li>
                ))}
              </ul>
            </NavigationMenu.Content>
          </NavigationMenu.Item>
        ))}
        <NavigationMenu.Indicator />
      </NavigationMenu.List>
    </NavigationMenu>
  );
}