SideNav

component

A multi-level navigation tree: links grouped in branches that open and close, at any depth, with the keyboard of a tree view; the open branches hold across Turbo visits, and the branch of the current page opens.

Install

php bin/console ux:install side-nav \
    --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 (1)

Default

Light

Dark

Code

<nav aria-label="Documentation" class="w-full max-w-xs p-2">
    <twig:SideNav label="Documentation" storageKey="side-nav-preview">
        <twig:SideNav:Item href="#overview">
            <twig:block name="icon"><twig:ux:icon name="flowbite:chart-pie-outline" class="size-5" /></twig:block>
            Overview
        </twig:SideNav:Item>
        <twig:SideNav:Branch label="Guides">
            <twig:block name="icon"><twig:ux:icon name="flowbite:file-code-outline" class="size-5" /></twig:block>
            <twig:SideNav:Item href="#installation">Installation</twig:SideNav:Item>
            <twig:SideNav:Branch label="Forms">
                <twig:SideNav:Item href="#fields" :active="true">Fields</twig:SideNav:Item>
                <twig:SideNav:Item href="#validation">Validation</twig:SideNav:Item>
            </twig:SideNav:Branch>
        </twig:SideNav:Branch>
        <twig:SideNav:Branch label="Reference">
            <twig:block name="icon"><twig:ux:icon name="flowbite:list-outline" class="size-5" /></twig:block>
            <twig:SideNav:Item href="#components">Components</twig:SideNav:Item>
            <twig:SideNav:Item href="#controllers">Controllers</twig:SideNav:Item>
        </twig:SideNav:Branch>
    </twig:SideNav>
</nav>