A static copy of the demo at release 0.3.0. Live Components, Turbo Streams and form submits need Symfony: run the full demo.

NavMenu

component

The navbar's menu: links and buttons opening submenus of links, nested at any depth, as a disclosure navigation; the current page and its submenus are marked, and the same menu opens in place in a mobile nav's drawer.

Install

php bin/console ux:install nav-menu \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies
assets/ → assets/
templates/ → templates/
Recipes
navigation
Composer
symfony/ux-icons
twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (2)

Default

Light
Dark
Code 
<div class="h-72 w-full">
    <twig:Navbar navLabel="Product" class="w-full rounded-base border">
        <twig:block name="brand"><a href="#" class="text-lg font-semibold text-heading">[Product name]</a></twig:block>
        <twig:block name="nav">
            <twig:NavMenu id="nav-menu-preview">
                <twig:NavMenu:Link href="#overview">Overview</twig:NavMenu:Link>
                <twig:NavMenu:Submenu label="Guides">
                    <twig:NavMenu:Link href="#installation">Installation</twig:NavMenu:Link>
                    <twig:NavMenu:Submenu label="Forms">
                        <twig:NavMenu:Link href="#fields" :active="true">Fields</twig:NavMenu:Link>
                        <twig:NavMenu:Link href="#validation">Validation</twig:NavMenu:Link>
                    </twig:NavMenu:Submenu>
                </twig:NavMenu:Submenu>
                <twig:NavMenu:Submenu label="Reference">
                    <twig:NavMenu:Link href="#components">Components</twig:NavMenu:Link>
                    <twig:NavMenu:Link href="#controllers">Controllers</twig:NavMenu:Link>
                </twig:NavMenu:Submenu>
            </twig:NavMenu>
        </twig:block>
    </twig:Navbar>
</div>

In a mobile nav

Light
Dark
Code 
<div class="h-96 w-full max-w-xs rounded-base border border-default p-2">
    <twig:NavMenu id="nav-menu-vertical-preview" orientation="vertical">
        <twig:NavMenu:Link href="#overview">Overview</twig:NavMenu:Link>
        <twig:NavMenu:Submenu label="Guides">
            <twig:NavMenu:Link href="#installation">Installation</twig:NavMenu:Link>
            <twig:NavMenu:Submenu label="Forms">
                <twig:NavMenu:Link href="#fields" :active="true">Fields</twig:NavMenu:Link>
            </twig:NavMenu:Submenu>
        </twig:NavMenu:Submenu>
        <twig:NavMenu:Submenu label="Reference">
            <twig:NavMenu:Link href="#components">Components</twig:NavMenu:Link>
        </twig:NavMenu:Submenu>
    </twig:NavMenu>
</div>