Давайте создадим компонент для отображения подменю в верхней панели.
Сначала создадим интерфейс для элементов с подменю в FdTopSidebar.tsx:

interface TopSidebarItem extends SidebarItem {
    submenu?: {
        text: string;
        path?: string;
        icon?: string;
    }[];
}


Теперь создадим компонент FdTopSidebarItem для обработки отдельного элемента с подменю:
function FdTopSidebarItem({ item }: { item: TopSidebarItem }) {
    const [isHovered, setIsHovered] = useState(false);

    return (
        <div
            className="relative"
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
        >
            <div className="flex items-center gap-2 rounded-md p-2 text-fd-tertiary-50 hover:bg-fd-tertiary-700">
                <FdIcon
                    name={item.icon || defaultSidebarIconName}
                    className="size-4 text-fd-tertiary-50"
                />
                {item.submenu && (
                    <FdIcon
                        name={iconNames.caretDownIcon}
                        className="size-3 text-fd-tertiary-50"
                    />
                )}
            </div>

            {isHovered && (
                <div className="absolute left-1/2 top-full z-50 -translate-x-1/2 transform pt-2">
                    <div className="rounded-md bg-fd-tertiary-700 p-1 shadow-lg">
                        {item.submenu ? (
                            <div className="min-w-40">
                                {item.submenu.map((submenuItem, index) => (
                                    <FdLink
                                        key={index}
                                        href={submenuItem.path ?? "#"}
                                        className="flex items-center gap-2 rounded-sm px-3 py-2 text-sm text-fd-tertiary-50 hover:bg-fd-tertiary-600"
                                    >
                                        {submenuItem.icon && (
                                            <FdIcon
                                                name={submenuItem.icon}
                                                className="size-4 text-fd-tertiary-50"
                                            />
                                        )}
                                        {submenuItem.text}
                                    </FdLink>
                                ))}
                            </div>
                        ) : (
                            <div className="whitespace-nowrap px-3 py-2 text-sm text-fd-tertiary-50">
                                {item.displayName || item.name}
                            </div>
                        )}
                    </div>
                </div>
            )}
        </div>
    );
}



Обновим основной компонент FdTopSidebar:
export function FdTopSidebar() {
    const items = useSidebarResources() as TopSidebarItem[];

    return (
        <div className="flex items-center gap-1">
            {items.map((item) => (
                <FdTopSidebarItem key={item.name} item={item} />
            ))}
        </div>
    );
}

Особенности реализации:
При наведении на иконку появляется подменю
Подменю отображается под иконкой и центрируется
3. Если у элемента есть подменю, показывается маленькая стрелка вниз
Каждый элемент подменю может иметь свою иконку
При наведении на элементы подменю они подсвечиваются
Используется z-index для корректного отображения поверх других элементов
Добавлены плавные переходы и тени для лучшего UX