MobileNav

component

The app's navigation on small screens: a menu button in the navbar opening a modal drawer that holds the side nav, closed by a link, Escape, the backdrop and every Turbo visit.

Install

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

README Source

What it installs

Copies: assets/ → assets/
templates/ → templates/
Recipes: drawer navigation
Composer: symfony/ux-icons
twig/extra-bundle
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

<div class="h-96">
    <twig:MobileNav id="mobile-nav-preview" open>
        <twig:block name="header"><span class="text-lg font-semibold text-heading">[Product name]</span></twig:block>
        <twig:SideNav label="Pages" storageKey="mobile-nav-preview">
            <twig:SideNav:Item href="#dashboard" :active="true">
                <twig:block name="icon"><twig:ux:icon name="flowbite:chart-pie-outline" class="size-5" /></twig:block>
                Dashboard
            </twig:SideNav:Item>
            <twig:SideNav:Branch label="Orders" open>
                <twig:block name="icon"><twig:ux:icon name="flowbite:cart-outline" class="size-5" /></twig:block>
                <twig:SideNav:Item href="#orders">All orders</twig:SideNav:Item>
                <twig:SideNav:Item href="#returns">Returns</twig:SideNav:Item>
            </twig:SideNav:Branch>
            <twig:SideNav:Item href="#profile">
                <twig:block name="icon"><twig:ux:icon name="flowbite:user-outline" class="size-5" /></twig:block>
                Profile
            </twig:SideNav:Item>
        </twig:SideNav>
    </twig:MobileNav>
</div>