Menus

How to use menus

Configure menus

To start fetching menus from Drupal, you will need to add them to project.config.js file.

./project.config.js

module.exports = {
    ["main", "footer"]
}
This change requires a restart of your development server.

main and footer are the machine name of the menus which Drupal provides. You can add as many as you want, as long as they exist in Drupal.

Use menus

Once configured, you can use this custom hook useMenu to retrieve menus anywhere in your components.

./components/widgets/header/HeaderVariant1Widget.jsx

import { useMenu } from "@vactorynext/core/hooks"
import { Link } from "@/ui"


export const Header = () => {
    const navigation = useMenu("main")


    return (
        <div className="ml-10 space-x-8 lg:block">
            {navigation.map((link) => (
                <Link
                    key={link.id}
                    href={link.url}
                    className="text-base font-medium text-white hover:text-indigo-50"
                >
                    {link.title}
                </Link>
            ))}
        </div>
    )
}

Need help?

InternationalizationArchitecture