dropdown svg

sample

navigation.hbs

<nav class="gh-head-menu">
    <ul class="gh-menu">
        {{#foreach navigation}}
            <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}">
                <a href="{{url absolute="true"}}">
                    {{label}}

                    {{!-- Only show icon if nav slug is "tags" --}}
                    {{#has slug="tags"}}
                        <svg xmlns="http://www.w3.org/2000/svg" class="dropdown-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="6 9 12 15 18 9"></polyline>
                        </svg>
                    {{/has}}
                </a>

                {{!-- Only show dropdown if nav slug is "tags" --}}
                {{#has slug="tags"}}
                    <ul class="sub-nav tags-sub-nav">
                        {{#get "tags" limit="all" order="count.posts desc"}}
                            {{#foreach tags}}
                                <li><a href="{{url}}">{{name}}</a></li>
                            {{/foreach}}
                        {{/get}}
                    </ul>
                {{/has}}
            </li>
        {{/foreach}}
    </ul>
</nav>

CSS

.dropdown-icon {
    width: 14px;
    height: 14px;
    margin-left: 5px;
    transition: transform 0.2s ease;
}

.nav-tags:hover .dropdown-icon {
    transform: rotate(180deg);
}