DS | Adila.co
Componentes

Navigation Menu

Componente navigation-menu do design system adila.co.

Instalação

bun add @adila-sh/ui

Uso

O NavigationMenu (raiz) já renderiza o posicionador internamente — basta compor List, Item, Trigger, Content e Link. Itens sem submenu usam apenas o Link.

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from '@adila-sh/ui';

export function Example() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Produto</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-56 gap-1">
              <li>
                <NavigationMenuLink href="#">Visão geral</NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="#">Integrações</NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="#">Preços</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

Dependências

  • class-variance-authority
  • lucide-react

Nesta página