SectionNav

component

Vertical tabs that navigate: one link per page of a group of pages (settings, an account, a project), the current one marked, a column on large screens and a strip that scrolls sideways on small ones.

Install

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

README Source

What it installs

Copies: assets/ → assets/
templates/ → templates/
Recipes: navigation
Composer: 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 (2)

Default

Light

Dark

Code

<div class="w-full max-w-56">
    <twig:SectionNav label="Settings" orientation="vertical">
        <twig:SectionNav:Item href="#profile" :active="true">Profile</twig:SectionNav:Item>
        <twig:SectionNav:Item href="#notifications" :active="false">Notifications</twig:SectionNav:Item>
        <twig:SectionNav:Item href="#billing" :active="false">Billing</twig:SectionNav:Item>
        <twig:SectionNav:Item href="#security" :active="false">Security</twig:SectionNav:Item>
    </twig:SectionNav>
</div>

Always a row

Light

Dark

Code

<div class="w-full max-w-xs">
    <twig:SectionNav label="Project" orientation="horizontal">
        <twig:SectionNav:Item href="#overview" :active="false">Overview</twig:SectionNav:Item>
        <twig:SectionNav:Item href="#members" :active="true">Members</twig:SectionNav:Item>
        <twig:SectionNav:Item href="#integrations" :active="false">Integrations</twig:SectionNav:Item>
        <twig:SectionNav:Item href="#danger-zone" :active="false">Danger zone</twig:SectionNav:Item>
    </twig:SectionNav>
</div>