[Navigation Menyu] Example about use collapsible like viewport

[SalahAdDin]

How is the best way to use the viewport for creating collapsible vertical menus?

We see viewport is very important for creating gracefil animations, expecially when closing the menu:

When leaving the content, the viewport closes with a nice animation.

In contrast, when we don't use a viewport and we render the content, at opening we can see the animation, but at closing there is no animation:

The content is removed before the animation can proceed, avoiding it to happen.

Right now, we don't know how to make the viewoport to appear just below the hovered navigation item...

Could you guys help us to understand how to do it?

Thanks

[m-kolomoyets]

Hi. I have faced same issue, but I fixed it with Radix Collapsible primitive. Here is the sleketon of the vertical layout:

export const SIDEBAR_LINKS: LinkConfig[] = [
    {
        label: 'Dashboard',
        Icon: Chart16Icon,
        to: '/ui-kit',
        enabled: true,
    },
    {
        label: 'Team',
        Icon: Team16Icon,
        to: '/',
        enabled: true,
    },
    {
        label: 'Reports',
        Icon: Document16Icon,
        enabled: true,
        links: [
            {
                label: 'Active deals',
                to: '/',
                enabled: true,
            },
            {
                label: 'Pipeline deals',
                to: '/',
                enabled: true,
            },
        ],
    },
    {
        label: 'Training',
        Icon: Book16Icon,
        to: '/',
        enabled: true,
    },
    {
        label: 'My referral links',
        Icon: Box16Icon,
        to: '/',
        enabled: true,
    },
    {
        label: 'Marketing',
        Icon: PlayCircleFilled16Icon,
        to: '/',
        enabled: true,
    },
];

/// ...
const SidebarNavigation: React.FC = () => {
    return (
        <NavigationMenuRoot className={s.wrap} orientation="vertical">
            <NavigationMenuList className={s.list}>
                {SIDEBAR_LINKS.map(({ enabled, label, Icon, links = [], ...rest }) => {
                    if (!enabled) {
                        return null;
                    }

                    if (links?.length) {
                        return (
                            <CollapsibleRoot>
                                <NavigationGroupCollapsibleTrigger>
                                    {Icon ? <Icon /> : null}
                                    <span>{label}</span>
                                </NavigationGroupCollapsibleTrigger>
                                <CollapsibleContent className={s['child-content']} asChild>
                                    <NavigationMenuList className={s.list}>
                                        {links.map(({ enabled, label, ...rest }) => {
                                            if (!enabled) {
                                                return null;
                                            }

                                            return (
                                                <NavigationLink {...rest}>
                                                    <TreeSubGap16Icon />
                                                    <span>{label}</span>
                                                </NavigationLink>
                                            );
                                        })}
                                    </NavigationMenuList>
                                </CollapsibleContent>
                            </CollapsibleRoot>
                        );
                    }

                    return (
                        <NavigationLink {...rest}>
                            {Icon ? <Icon /> : null}
                            <span>{label}</span>
                        </NavigationLink>
                    );
                })}
            </NavigationMenuList>
        </NavigationMenuRoot>
    );
};

const NavigationLink: React.FC<NavigationLinkProps> = ({ className, children, ...rest }) => {
    return (
        <NavigationMenuItem className={clsx(s.wrap, 'focus-primary', className)} asChild>
            <NavigationMenuLink asChild>
                <Link {...rest}>{children}</Link>
            </NavigationMenuLink>
        </NavigationMenuItem>
    );
};

const NavigationGroupCollapsibleTrigger: React.FC<WithClassName<React.PropsWithChildren>> = ({
    className,
    children,
}) => {
    return (
        <CollapsibleTrigger asChild>
            <NavigationMenuItem className={clsx(s.wrap, 'focus-primary', className)} asChild>
                <button>
                    <span className={s.inner}>{children}</span>
                    <ChevronDown16Icon className={clsx(s.icon, s.indicator)} />
                </button>
            </NavigationMenuItem>
        </CollapsibleTrigger>
    );
};

Here is the video of visual result

CleanShot.2025-02-18.at.1.47.25.mp4