Navigation Menu

uvx django_shadcn@latest add navigation_menu

<c-navigation-menu>
  <c-navigation-menu.list>
    <c-navigation-menu.item>
      <c-navigation-menu.trigger index="0"
        >Getting started</c-navigation-menu.trigger
      >
      <c-navigation-menu.content index="0">
        <c-navigation-menu.link href="/introduction"
          >Introduction</c-navigation-menu.link
        >
        <c-navigation-menu.link href="/installation"
          >Installation</c-navigation-menu.link
        >
      </c-navigation-menu.content>
    </c-navigation-menu.item>

    <c-navigation-menu.item>
      <c-navigation-menu.trigger index="1"
        >Components</c-navigation-menu.trigger
      >
      <c-navigation-menu.content index="1">
        <div class="md:w-[150px]">
          <c-navigation-menu.link href="/accordion"
            >Accordion</c-navigation-menu.link
          >
          <c-navigation-menu.link href="/button">Button</c-navigation-menu.link>
          <c-navigation-menu.link href="/card">Card</c-navigation-menu.link>
        </div>
      </c-navigation-menu.content>
    </c-navigation-menu.item>

    <c-navigation-menu.item>
      <c-navigation-menu.trigger index="2">Utilities</c-navigation-menu.trigger>
      <c-navigation-menu.content index="2">
        <div class="md:w-[150px]">
          <c-navigation-menu.link href="/typography"
            >Typography</c-navigation-menu.link
          >
          <c-navigation-menu.link href="/icons">Icons</c-navigation-menu.link>
          <c-navigation-menu.link href="/colors">Colors</c-navigation-menu.link>
        </div>
      </c-navigation-menu.content>
    </c-navigation-menu.item>

    <c-navigation-menu.item>
      <c-navigation-menu.link href="https://shadcn-django.com/"
        >Documentation</c-navigation-menu.link
      >
    </c-navigation-menu.item>
  </c-navigation-menu.list>
</c-navigation-menu>

<c-card class="w-[380px]">
  <c-card.header>
    <c-card.title>Create Project</c-card.title>
    <c-card.description
      >Deploy your new project in one-click.</c-card.description
    >
  </c-card.header>
  <c-card.content class="space-y-2">
    <div class="flex flex-col space-y-1">
      <c-label for="name">Name</c-label>
      <c-input id="name" placeholder="Name of your project" />
    </div>
  </c-card.content>
  <c-card.footer class="flex justify-between">
    <c-button variant="outline">Cancel</c-button>
    <c-button>Submit</c-button>
  </c-card.footer>
</c-card>