Tạo Menu Dropdown chuẩn UIkit trong WordPress

Giới thiệu

WordPress hỗ trợ menu động thông qua wp_nav_menu(), nhưng không tương thích sẵn với UIkit – một UI framework hiện đại yêu cầu cấu trúc HTML đặc biệt cho dropdown menu. Bài viết này hướng dẫn cách tùy biến hệ thống menu của WordPress để tạo dropdown menu đúng chuẩn UIkit, bao gồm cả việc thêm mũi tên chỉ xuống nhằm cải thiện trải nghiệm người dùng.

Thêm class uk-parent cho các mục có submenu

UIkit sử dụng class uk-parent để nhận diện mục menu nào có submenu. WordPress đã đánh dấu sẵn các item như vậy với class menu-item-has-children, ta chỉ cần map lại bằng filter:

add_filter('nav_menu_css_class', function ($classes, $item, $args) {
    if (!empty($args->theme_location) && $args->theme_location === 'main-menu') {
        if (in_array('menu-item-has-children', $classes)) {
            $classes[] = 'uk-parent';
        }
    }
    return $classes;
}, 10, 3);

Tùy biến Walker để tạo cấu trúc dropdown

UIkit yêu cầu submenu phải được bọc trong <div class="uk-navbar-dropdown">, chứ không đơn thuần là một <ul> lồng trong <li>. Do đó ta cần tạo một Walker tùy chỉnh như sau:

class UIkit_Navbar_Walker extends Walker_Nav_Menu {
    public function start_lvl( &$output, $depth = 0, $args = null ) {
        $output .= '<div class="uk-navbar-dropdown"><ul class="uk-nav uk-navbar-dropdown-nav">';
    }

    public function end_lvl( &$output, $depth = 0, $args = null ) {
        $output .= '</ul></div>';
    }

    public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
        $classes = empty($item->classes) ? [] : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $has_children = in_array('menu-item-has-children', $classes);
        $class_names = implode(' ', array_map('esc_attr', $classes));

        $output .= '<li class="' . $class_names . '">';

        $title = esc_html($item->title);

        if ($has_children && $depth === 0) {
            // Thêm biểu tượng mũi tên xổ xuống bằng uk-navbar-parent-icon
            $title .= ' <span uk-navbar-parent-icon></span>';
        }

        $atts = ['href' => esc_url($item->url)];
        $attributes = '';
        foreach ($atts as $attr => $value) {
            if (!empty($value)) {
                $attributes .= ' ' . $attr . '="' . esc_attr($value) . '"';
            }
        }

        $output .= '<a' . $attributes . '>' . $title . '</a>';
    }

    public function end_el( &$output, $item, $depth = 0, $args = null ) {
        $output .= '</li>';
    }
}

Vì sao cần uk-navbar-parent-icon?

UIkit không tự hiển thị mũi tên cho các item có submenu. Nếu bạn không thêm <span uk-navbar-parent-icon></span>, người dùng sẽ không biết item đó có thể mở dropdown. Thay vì dùng CSS hoặc icon thủ công, UIkit có sẵn một directive để thêm icon xổ xuống đúng chuẩn thiết kế. Đây là điểm mà rất nhiều theme WordPress UIkit bỏ sót, khiến dropdown không thân thiện với người dùng.

Gọi menu trong giao diện

Trong phần header.php hoặc nơi bạn muốn hiển thị menu, gọi menu như sau:

<?php
wp_nav_menu([
    'theme_location' => 'main-menu',
    'container'      => false,
    'menu_class'     => 'uk-navbar-nav',
    'walker'         => new UIkit_Navbar_Walker(),
    'fallback_cb'    => false,
]);
?>

Kết luận

Việc kết hợp WordPress với UIkit để tạo dropdown menu đòi hỏi một chút tuỳ biến, nhưng bù lại bạn có được một giao diện hiện đại, dễ dùng, và chuẩn thiết kế. Quan trọng nhất là xử lý đúng cấu trúc HTML và thêm icon xổ xuống bằng uk-navbar-parent-icon – chi tiết nhỏ nhưng có ảnh hưởng lớn đến trải nghiệm người dùng.