0

I'm trying to display Submenu links within a Custom Tailwindcss / Vue component that I added within the Nav Walker.

Menu Issues

header.php

    <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
    <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
</div>
<div class="block lg:hidden">
    <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
    <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
    </button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
        <?php
            wp_nav_menu(array (
                'theme_location' => 'Primary',
                'menu_id'        => 'Primary',
                'menu_class'     => 'Primary',
                'walker' => new Clean_Walker_Nav
            ));
        ?>
    </div>
    <div>
    <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Download</a>
    </div>
</div>
</nav>

inc/Clean_Walker_Nav.php

    class Clean_Walker_Nav extends Walker_Nav_Menu {
    /**
     * Filter used to remove built in WordPress-generated classes
     * @param  mixed $var The array item to verify
     * @return boolean      Whether or not the item matches the filter
     */
    function filter_builtin_classes( $var ) {
        return ( FALSE === strpos( $var, 'item' ) ) ? $var : '';
    }
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "<div class='flex items-center'>";
        $output .= "<dropdown-link>";
        $output .= "<span slot='link' class='appearance-none flex items-center inline-block text-white font-medium'>";
        $output .= "<span class='mr-1'>$indent</span>";
        $output .= "<svg class='h-4 w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>";
        $output .= "<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />";
        $output .= "</svg>";
        $output .= "</span>";
        $output .= "<div slot='dropdown' class='bg-white shadow rounded border overflow-hidden'>";
        $output .= "\n$indent<ul>\n";
        $output .= "</div>";
        $output .= "</dropdown-link>";
        $output .= "</div>";
    }
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
        $class_names = $value = '';
        $unfiltered_classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes = array_filter( $unfiltered_classes, array( $this, 'filter_builtin_classes' ) );
        if ( preg_grep("/^current/", $unfiltered_classes) ) {
            $classes[] = 'active';
        }
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
        $output .= $indent . '<li' . $value . $class_names .'>';
        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';
        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }
        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

Update

I've Managed to sort this All I needed todo was remove these lines.

        $output .= "</div>";
        $output .= "</dropdown-link>";
        $output .= "</div>";
  • And what’s the problem? What’s not working? – Jacob Peattie Sep 21 at 1:52
  • @JacobPeattie Thanks for commenting, what i'm trying todo is get the submenu to be looped out in the section. At the minute the sub-menu li items are not going into the ul. – Henshall Sep 21 at 13:45
0

I've managed to sort this All I needed to do was remove these lines.

    $output .= "</div>";
    $output .= "</dropdown-link>";
    $output .= "</div>";

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.