Navigation Menu

uvx shadcn_django@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-navigationmenu>

<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>