Menus

Menus in Vactory provide navigation structure for your application. You can configure menus either through project configuration files or dynamically through the Admin console, giving you flexibility in how you manage your site's navigation.

Menu Configuration Methods

There are two ways to configure menus in your Vactory application:

Method 1: Project Configuration File

To start fetching menus from Drupal, add them to your project.config.js file:

module.exports = {
    menus: ["main", "footer"],
}

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

Method 2: Admin Console Configuration

Alternatively, you can configure menus dynamically through the Admin console. When menus are defined in the Admin console, they will take precedence over the project configuration file.

The system automatically handles this priority as shown in the application logic:

// If Menus from Admin console are not defined, use the ones from project config
menus = await getMenus(
    clientFlags?.system__menus ? clientFlags?.system__menus.split(",") : enabledMenus,
    locale,
    {
        auth: session,
        uid,
        locale,
    }
)

This approach allows for dynamic menu management without requiring code changes or server restarts.

Using Menus in Components

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

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>
    )
}

Menu Data Structure

The useMenu hook returns an array of menu items with the following structure:

• id: Unique identifier for the menu item
• url: The link URL for the menu item
• title: Display text for the menu item

Best Practices

• Menu Names: Use descriptive machine names for your menus (e.g., main, footer, sidebar)
• Fallback Strategy: The system automatically falls back to project configuration if Admin console menus are not defined

Need Help?