Sidebar

component

The app's main navigation: grouped links with icons and counts, collapsible to icons, opened over the page on small screens.

Install

php bin/console ux:install sidebar \
    --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

<div class="h-96 w-full max-w-md overflow-hidden rounded-base border border-default">
    <twig:Sidebar id="sidebar-preview" storageKey="sidebar-preview">
        <twig:block name="header"><span class="text-lg font-semibold text-heading">[Product name]</span></twig:block>
        <twig:Sidebar:Group label="Overview">
            <twig:Sidebar:Item href="#dashboard" :active="true">
                <twig:block name="icon"><twig:ux:icon name="flowbite:chart-pie-outline" class="size-5" /></twig:block>
                Dashboard
            </twig:Sidebar:Item>
            <twig:Sidebar:Item href="#inbox" badge="3" :active="false">
                <twig:block name="icon"><twig:ux:icon name="flowbite:inbox-outline" class="size-5" /></twig:block>
                Inbox
            </twig:Sidebar:Item>
        </twig:Sidebar:Group>
        <twig:Sidebar:Group label="Account">
            <twig:Sidebar:Item href="#profile" :active="false">
                <twig:block name="icon"><twig:ux:icon name="flowbite:user-outline" class="size-5" /></twig:block>
                Profile
            </twig:Sidebar:Item>
        </twig:Sidebar:Group>
    </twig:Sidebar>
</div>